/* ==========================================================================
   CENTRALDEV — SHOWCASE COMPONENTS (Clopos-inspired)
   Real product screenshots, alternating strips, screen grids.
   ========================================================================== */

/* ===== SHOWCASE STRIP — alternating image + text rows ===== */
.showcase-strip {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.showcase-strip + .showcase-strip { padding-top: 0; }

.showcase-strip.tinted {
    background: linear-gradient(180deg, rgba(0, 122, 255, 0.025) 0%, transparent 100%);
}

.strip-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.strip-row.reverse .strip-text   { order: 2; }
.strip-row.reverse .strip-visual { order: 1; }

.strip-text .badge { margin-bottom: 18px; }
.strip-text h2 {
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.1;
    margin-bottom: 18px;
}
.strip-text > p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-soft);
    margin-bottom: 26px;
    max-width: 520px;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    gap: 12px;
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
}
.check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--brand-grad);
    background-image:
        linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-blend-mode: normal;
    background-size: cover, 14px 14px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.30);
}

/* ===== STRIP VISUAL (image container) ===== */
.strip-visual {
    position: relative;
}
.strip-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-xl);
    box-shadow:
        0 30px 60px -20px rgba(15, 23, 42, 0.30),
        0 18px 36px -18px rgba(15, 23, 42, 0.22);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.strip-visual:hover img {
    transform: translateY(-4px);
    box-shadow:
        0 40px 80px -20px rgba(15, 23, 42, 0.35),
        0 22px 44px -18px rgba(15, 23, 42, 0.25);
}

/* glow behind image */
.strip-visual::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center, rgba(0, 122, 255, 0.18), transparent 70%);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.7;
}

/* ===== SCREEN GRID — 3 screenshots in a row ===== */
.screen-showcase {
    padding: 90px 0;
}
.screen-showcase .section-head { margin-bottom: 50px; }

.screen-grid {
    display: grid;
    gap: 26px;
}
.screen-grid-2 { grid-template-columns: repeat(2, 1fr); }
.screen-grid-3 { grid-template-columns: repeat(3, 1fr); }

.screen-card {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 24px 48px -18px rgba(15, 23, 42, 0.25),
        0 12px 24px -12px rgba(15, 23, 42, 0.15);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    background: transparent;
}
.screen-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
}
.screen-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 36px 64px -18px rgba(15, 23, 42, 0.32),
        0 18px 36px -12px rgba(15, 23, 42, 0.20);
}

/* ===== BIG HERO VISUAL (Clopos-style) ===== */
.hero-visual {
    margin-top: 60px;
    position: relative;
    text-align: center;
}
.hero-visual img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow:
        0 50px 100px -30px rgba(15, 23, 42, 0.40),
        0 30px 60px -20px rgba(15, 23, 42, 0.30);
    transition: transform 0.5s var(--ease);
}
.hero-visual::before {
    content: '';
    position: absolute;
    inset: -40px;
    background:
        radial-gradient(ellipse at center, rgba(0, 122, 255, 0.22), transparent 70%),
        radial-gradient(ellipse at bottom, rgba(90, 200, 250, 0.18), transparent 70%);
    filter: blur(60px);
    z-index: -1;
    opacity: 0.85;
}

/* ===== HERO with side-by-side image (two-up) ===== */
.hero.hero-split {
    padding: 100px 0 60px;
    text-align: left;
}
.hero.hero-split .hero-split-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero.hero-split .hero-title { text-align: left; }
.hero.hero-split .hero-subtitle { text-align: left; margin-left: 0; margin-right: 0; max-width: 540px; }
.hero.hero-split .hero-cta { justify-content: flex-start; }

.hero-side-visual {
    position: relative;
}
.hero-side-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow:
        0 40px 80px -20px rgba(15, 23, 42, 0.35),
        0 20px 40px -16px rgba(15, 23, 42, 0.22);
}
.hero-side-visual::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(ellipse at center, rgba(0, 122, 255, 0.20), transparent 70%);
    filter: blur(50px);
    z-index: -1;
    opacity: 0.8;
}

/* ===== APP STORE BADGES ===== */
.app-badges {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.30);
}
.app-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.40);
    color: #fff;
}
.app-badge svg { width: 22px; height: 22px; flex-shrink: 0; }
.app-badge .badge-line1 { font-size: 10px; opacity: 0.8; line-height: 1; margin-bottom: 2px; font-weight: 500; letter-spacing: 0.3px; }
.app-badge .badge-line2 { font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: -0.2px; }
.app-badge .badge-text { display: flex; flex-direction: column; }

/* ===== SECTION DIVIDER MARK ===== */
.section-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand);
    margin-bottom: 14px;
}
.section-mark::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--brand-grad);
    border-radius: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .showcase-strip { padding: 70px 0; }
    .strip-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .strip-row.reverse .strip-text,
    .strip-row.reverse .strip-visual { order: unset; }
    .strip-row.reverse .strip-visual { order: -1; }

    .hero.hero-split .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero.hero-split .hero-title,
    .hero.hero-split .hero-subtitle { text-align: center !important; }
    .hero.hero-split .hero-subtitle { margin: 0 auto 24px !important; max-width: 600px; }
    .hero.hero-split .hero-cta { justify-content: center; }
    /* hero-side-visual mobil order */
    .hero.hero-split .hero-side-visual { order: -1; max-width: 480px; margin: 0 auto; }

    .screen-grid-3 { grid-template-columns: 1fr; gap: 20px; }
    .screen-grid-2 { grid-template-columns: 1fr; }
    .screen-showcase { padding: 60px 0; }

    /* vcard-kart müqayisəsi sütun yarat */
    .vcard-compare-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
    .showcase-strip { padding: 50px 0; }
    .showcase-strip + .showcase-strip { padding-top: 0; }
    .strip-row { gap: 30px; }
    .strip-text h2 { font-size: clamp(24px, 7vw, 30px); }
    .strip-text > p { font-size: 15px; line-height: 1.55; max-width: 100%; }
    .strip-text .badge { margin-bottom: 12px; }
    .check-list { gap: 10px; }
    .check-list li { font-size: 14px; }
    .check-list li::before { width: 20px; height: 20px; background-size: cover, 12px 12px; }

    .screen-showcase { padding: 50px 0; }
    .screen-showcase .section-head { margin-bottom: 30px; }

    /* Hero visual — soft glow azaldılır mobil GPU-dən qoruyaq */
    .hero-visual { margin-top: 36px !important; }
    .hero-visual img {
        max-width: 100% !important;
        border-radius: 18px;
    }
    .hero-visual::before { filter: blur(30px); opacity: 0.55; }

    .hero-side-visual img { border-radius: 18px; }
    .hero-side-visual::before { filter: blur(30px); opacity: 0.55; }

    .strip-visual img,
    .screen-card img,
    .screen-card { border-radius: 18px; }
    .strip-visual::before { filter: blur(28px); opacity: 0.5; }

    /* App badges — kiçik ekranda tam genişlik */
    .app-badges { gap: 10px; }
    .app-badge {
        flex: 1 1 100%;
        justify-content: center;
        padding: 14px 18px;
    }

    .section-mark { font-size: 11px; letter-spacing: 1.5px; }
    .section-mark::before { width: 20px; }
}

@media (max-width: 480px) {
    .showcase-strip { padding: 40px 0; }
    .screen-showcase { padding: 40px 0; }
    .strip-row { gap: 24px; }
    .strip-text h2 { font-size: 24px; line-height: 1.18; }
    .strip-text .badge + h2,
    .strip-text h2 { margin-bottom: 14px; }
    .check-list li { gap: 10px; }
    .screen-grid { gap: 16px; }

    .hero.hero-split { padding: 50px 0 30px !important; }
    .hero.hero-split .hero-split-grid { gap: 30px; }
}

/* Touch device — hover effektləri zəiflət (sürət üçün) */
@media (hover: none) {
    .strip-visual:hover img,
    .screen-card:hover { transform: none; }
    .app-badge:hover { transform: none; }
}