/* =========================================================
   PUZZLE CLINIC MANAGEMENT
   Premium Product Page
   No Bootstrap Icons
   No external icon library
   ========================================================= */

:root {
    --pc-blue: #0563df;
    --pc-blue-dark: #034ba8;
    --pc-cyan: #4cb5ff;
    --pc-teal: #00bfa6;

    --pc-dark: #07111f;
    --pc-dark-2: #0c1b2c;

    --pc-text: #172436;
    --pc-muted: #68778a;

    --pc-bg: #f6f9fd;
    --pc-white: #ffffff;
    --pc-border: #e5ebf3;

    --pc-radius: 24px;
    --pc-shadow: 0 20px 60px rgba(7, 17, 31, .08);
}


/* =========================================================
   GLOBAL
   ========================================================= */

.puzzle-clinic-page {
    direction: rtl;
    color: var(--pc-text);
    background: var(--pc-white);
    overflow: hidden;
}

.puzzle-clinic-page * {
    box-sizing: border-box;
}

.pc-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


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

.pc-hero {
    position: relative;
    min-height: 690px;

    display: flex;
    align-items: center;

    color: #fff;

    background:
        radial-gradient(circle at 85% 20%,
            rgba(76, 181, 255, .18),
            transparent 30%),
        radial-gradient(circle at 15% 80%,
            rgba(0, 191, 166, .13),
            transparent 28%),
        var(--pc-dark);
}


.pc-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: 55px 55px;

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

    pointer-events: none;
}


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

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}


.pc-hero-content {
    max-width: 620px;
}


.pc-product-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

    padding: 8px 14px;

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

    border-radius: 999px;

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

    color: #b8dfff;

    font-size: 13px;

    font-weight: 800;
}


.pc-product-label img {
    width: 19px;
    height: 19px;

    object-fit: contain;
}


.pc-hero h1 {
    margin: 0 0 25px;

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

    line-height: 1.18;

    font-weight: 900;

    letter-spacing: -2px;
}


.pc-hero h1 span {
    display: block;

    background:
        linear-gradient(90deg,
            var(--pc-cyan),
            var(--pc-teal));

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

    color: transparent;
}


.pc-hero-description {
    max-width: 600px;

    margin: 0 0 32px;

    color: #b5c4d4;

    font-size: 17px;

    line-height: 2.15;
}


.pc-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.pc-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: .25s ease;
}


.pc-btn-primary {
    background: var(--pc-blue);

    color: #fff;

    box-shadow:
        0 15px 35px rgba(5, 99, 223, .3);
}


.pc-btn-primary:hover {
    transform: translateY(-3px);

    background: #1473ef;

    color: #fff;
}


.pc-btn-light {
    border: 1px solid rgba(255, 255, 255, .16);

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

    color: #fff;
}


.pc-btn-light:hover {
    background: rgba(255, 255, 255, .10);

    color: #fff;
}


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

.pc-dashboard-preview {
    position: relative;

    min-height: 490px;
}


.pc-dashboard-image {
    position: absolute;

    width: 100%;

    height: 420px;

    top: 30px;

    object-fit: cover;

    border-radius: 24px;

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

    box-shadow:
        0 40px 90px rgba(0, 0, 0, .4);
}


.pc-dashboard-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    top: 40px;
    left: 10%;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(5, 99, 223, .35),
            transparent 65%);

    filter: blur(20px);

    pointer-events: none;
}


.pc-floating-card {
    position: absolute;

    left: -25px;

    bottom: 10px;

    width: 230px;

    padding: 22px;

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

    border-radius: 20px;

    background:
        rgba(9, 25, 43, .85);

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .3);
}


.pc-floating-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 14px;

    object-fit: contain;
}


.pc-floating-card strong {
    display: block;

    margin-bottom: 7px;

    font-size: 17px;
}


.pc-floating-card span {
    color: #a8b8c9;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   TRUST BAR
   ========================================================= */

.pc-trust {
    position: relative;

    margin-top: -1px;

    padding: 26px 0;

    border-bottom: 1px solid var(--pc-border);

    background: #fff;
}


.pc-trust-grid {
    display: grid;

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

    gap: 20px;
}


.pc-trust-item {
    display: flex;

    align-items: center;

    gap: 13px;
}


.pc-trust-item img {
    width: 35px;
    height: 35px;

    padding: 7px;

    border-radius: 11px;

    background: #edf5ff;
}


.pc-trust-item strong {
    display: block;

    margin-bottom: 3px;

    color: var(--pc-dark);

    font-size: 14px;
}


.pc-trust-item span {
    color: var(--pc-muted);

    font-size: 11px;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.pc-section {
    padding: 105px 0;
}


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


.pc-section-heading {
    max-width: 700px;

    margin-bottom: 55px;
}


.pc-section-heading.center {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.pc-label {
    display: block;

    margin-bottom: 12px;

    color: var(--pc-blue);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;
}


.pc-section-heading h2 {
    margin: 0 0 16px;

    color: var(--pc-dark);

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.35;

    font-weight: 900;
}


.pc-section-heading p {
    margin: 0;

    color: var(--pc-muted);

    font-size: 15px;

    line-height: 2.1;
}


/* =========================================================
   PRODUCT PHILOSOPHY
   ========================================================= */

.pc-story-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 75px;

    align-items: center;
}


.pc-story-image {
    width: 100%;

    height: 470px;

    object-fit: cover;

    border-radius: 28px;

}


.pc-story-content h3 {
    margin: 0 0 18px;

    color: var(--pc-dark);

    font-size: 30px;

    line-height: 1.5;
}


.pc-story-content p {
    margin: 0 0 17px;

    color: var(--pc-muted);

    line-height: 2.15;

    font-size: 14px;
}


.pc-story-highlight {
    margin-top: 28px;

    padding: 22px;

    border-right:
        4px solid var(--pc-blue);

    border-radius: 14px;

    background: #f2f7ff;

    color: var(--pc-text);

    font-size: 14px;

    line-height: 2;

    font-weight: 700;
}


/* =========================================================
   HIGH LEVEL CAPABILITIES
   Deliberately NOT exposing full product feature list
   ========================================================= */

.pc-capabilities {
    display: grid;

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

    gap: 18px;
}


.pc-capability {
    padding: 28px 23px;

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

    border-radius: 22px;

    background: #fff;

    transition: .3s ease;
}


.pc-capability:hover {
    transform: translateY(-6px);

    border-color: transparent;

    box-shadow: var(--pc-shadow);
}


.pc-capability img {
    width: 46px;
    height: 46px;

    margin-bottom: 20px;

    padding: 10px;

    border-radius: 14px;

    background: #edf5ff;
}


.pc-capability h3 {
    margin: 0 0 9px;

    color: var(--pc-dark);

    font-size: 17px;
}


.pc-capability p {
    margin: 0;

    color: var(--pc-muted);

    font-size: 12px;

    line-height: 1.95;
}


/* =========================================================
   DIFFERENCE
   ========================================================= */

.pc-difference {
    display: grid;

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

    gap: 20px;
}


.pc-difference-card {
    position: relative;

    padding: 34px 28px;

    border-radius: 23px;

    background:
        linear-gradient(145deg,
            #ffffff,
            #f7faff);

    border: 1px solid var(--pc-border);
}


.pc-difference-number {
    display: block;

    margin-bottom: 22px;

    color: #c9d9ec;

    font-size: 13px;

    font-weight: 900;
}


.pc-difference-card h3 {
    margin: 0 0 12px;

    color: var(--pc-dark);

    font-size: 20px;
}


.pc-difference-card p {
    margin: 0;

    color: var(--pc-muted);

    line-height: 2;

    font-size: 13px;
}


/* =========================================================
   VISUAL PRODUCT SECTION
   ========================================================= */

.pc-product-showcase {
    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background:
        radial-gradient(circle at 85% 20%,
            rgba(76, 181, 255, .16),
            transparent 30%),
        var(--pc-dark);

    padding: 70px;
}


.pc-product-showcase-grid {
    display: grid;

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

    gap: 60px;

    align-items: center;
}


.pc-product-showcase h2 {
    margin: 0 0 17px;

    color: #fff;

    font-size: 35px;

    line-height: 1.4;
}


.pc-product-showcase p {
    margin: 0;

    color: #aebed0;

    line-height: 2.1;

    font-size: 14px;
}


.pc-showcase-image {
    width: 100%;

    height: 370px;

    object-fit: cover;

    border-radius: 22px;

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

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


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

.pc-final-cta {
    padding: 90px 0;

    color: #fff;

    background:
        radial-gradient(circle at 20% 20%,
            rgba(76, 181, 255, .2),
            transparent 28%),
        linear-gradient(135deg,
            var(--pc-blue-dark),
            var(--pc-blue));
}


.pc-final-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.pc-final-cta h2 {
    margin: 0 0 12px;

    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.4;
}


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

    margin: 0;

    color: #d8eaff;

    font-size: 14px;

    line-height: 2;
}


.pc-final-cta .pc-btn {
    flex-shrink: 0;

    background: #fff;

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


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

@media (max-width: 1000px) {

    .pc-hero-grid,
    .pc-story-grid,
    .pc-product-showcase-grid {
        grid-template-columns: 1fr;
    }

    .pc-hero {
        padding: 85px 0;
    }

    .pc-dashboard-preview {
        min-height: 430px;
    }

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

    .pc-trust-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


@media (max-width: 700px) {

    .pc-container {
        width: min(calc(100% - 28px),
                1180px);
    }

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

    .pc-hero {
        min-height: auto;

        padding: 70px 0;
    }

    .pc-hero h1 {
        font-size: 42px;
    }

    .pc-hero-description {
        font-size: 14px;
    }

    .pc-dashboard-preview {
        min-height: 350px;
    }

    .pc-dashboard-image {
        height: 300px;
    }

    .pc-floating-card {
        left: 5px;

        bottom: 0;

        width: 205px;
    }

    .pc-trust-grid {
        grid-template-columns: 1fr;
    }

    .pc-capabilities {
        grid-template-columns: 1fr;
    }

    .pc-difference {
        grid-template-columns: 1fr;
    }

    .pc-story-image {
        height: 340px;
    }

    .pc-product-showcase {
        padding: 35px 25px;
    }

    .pc-showcase-image {
        height: 280px;
    }

    .pc-final-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

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

    .pc-btn,
    .pc-capability {
        transition: none;
    }

}