.starpay-landing {
    font-family: IRANSans, sans-serif;
    color: #0f172a;
    background: #ffffff;
}

.sp-hero {
    position: relative;

    padding: 100px 20px;

    overflow: hidden;

    background: linear-gradient(
            180deg,
            rgba(249, 115, 22, 0.05),
            rgba(37, 99, 235, 0.03),
            transparent
    );
}

/* GLOW */

.sp-hero__glow {
    position: absolute;
    inset: 0;

    background: radial-gradient(
            circle at top right,
            rgba(249, 115, 22, 0.18),
            transparent 30%
    ),
    radial-gradient(
            circle at bottom left,
            rgba(37, 99, 235, 0.12),
            transparent 35%
    );

    filter: blur(80px);
}

/* CONTAINER */

.sp-hero__container {
    position: relative;

    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 480px;

    gap: 40px;
    align-items: center;
}

/* CONTENT */

.sp-hero__content {
    max-width: 620px;
}

/* BADGE */

.sp-badge {
    display: inline-block;

    padding: 7px 14px;

    border-radius: 999px;

    background: rgba(249, 115, 22, 0.10);

    border: 1px solid rgba(249, 115, 22, 0.18);

    color: #9a3412;

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

/* TITLE */

.sp-hero h1 {
    margin-top: 18px;

    font-size: 50px;
    line-height: 1.2;

    font-weight: 900;

    color: #0f172a;
}

.sp-hero h1 span {
    color: #f97316;
}

/* TEXT */

.sp-hero p {
    margin-top: 22px;

    font-size: 15px;

    line-height: 2.1;

    color: #475569;
}

/* ACTIONS */

.sp-actions {
    margin-top: 30px;

    display: flex;
    gap: 14px;

    flex-wrap: wrap;
}

/* TRUST */

.sp-hero__trust {
    margin-top: 28px;

    display: flex;
    gap: 12px;

    flex-wrap: wrap;
}

.sp-hero__trust div {
    padding: 10px 14px;

    border-radius: 14px;

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

    border: 1px solid rgba(15, 23, 42, 0.06);

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

    color: #334155;
}

/* VISUAL */

.sp-hero__visual {
    position: relative;
}

/* ================= CREDIT CARD 3D ================= */

.sp-credit-card {
    position: relative;

    padding: 30px;

    border-radius: 32px;

    background: linear-gradient(
            135deg,
            #0b1220,
            #0f172a 60%,
            #111827
    );

    color: white;

    min-height: 290px;

    overflow: hidden;

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35),
    0 10px 25px rgba(37, 99, 235, 0.10);

    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* subtle 3D hover (desktop only) */
.sp-credit-card:hover {
    transform: perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-4px);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45),
    0 15px 30px rgba(37, 99, 235, 0.15);
}

/* soft texture layer */
.sp-credit-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.25), transparent 40%),
    radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.18), transparent 45%),
    repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.03) 0px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 6px
    );

    opacity: 0.8;
    pointer-events: none;
}

/* glossy highlight */
.sp-credit-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -30%;

    width: 160%;
    height: 160%;

    background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.08),
            transparent 70%
    );

    transform: rotate(20deg);
    pointer-events: none;
}

/* top */
.sp-credit-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* chip better depth */
.sp-chip {
    width: 54px;
    height: 40px;

    border-radius: 12px;

    background: linear-gradient(135deg, #fbbf24, #f97316);

    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.35),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(249, 115, 22, 0.25);

    position: relative;
}

/* amount */
.sp-credit-card__amount {
    margin-top: 70px;
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    width: 100%;
    letter-spacing: 0.5px;

    text-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* footer */
.sp-credit-card__footer {
    margin-top: 40px;

    display: flex;
    justify-content: space-between;
}

/* micro glow text */
.sp-credit-card__footer strong {
    font-size: 15px;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.sp-credit-card__footer small {
    display: block;

    color: rgba(255, 255, 255, 0.60);

    margin-bottom: 6px;
}

.sp-credit-card__footer strong {
    font-size: 15px;
}

/* FLOATING */

.sp-floating-card {
    position: absolute;

    padding: 12px 16px;

    border-radius: 18px;

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

    backdrop-filter: blur(12px);

    border: 1px solid rgba(15, 23, 42, 0.06);

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

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.sp-floating-card.one {
    top: -10px;
    left: -30px;
}

.sp-floating-card.two {
    bottom: -10px;
    right: -20px;
}

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

@media (max-width: 980px) {

    .sp-hero__container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sp-hero__visual {
        order: -1;

        max-width: 420px;
        margin: auto;
        width: 100%;
    }

    .sp-hero__content {
        text-align: center;
        margin: auto;
    }

    .sp-actions {
        justify-content: center;
    }

    .sp-hero__trust {
        justify-content: center;
    }

    .sp-hero h1 {
        font-size: 28px;
        line-height: 1.4;
    }

}

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

@media (max-width: 640px) {

    .sp-hero {
        padding: 42px 14px 30px;
    }

    /* CONTAINER */
    .sp-hero__container {
        gap: 18px;
    }

    /* VISUAL */
    .sp-hero__visual {

        max-width: 270px;

        margin: auto;
    }

    /* CREDIT CARD */
    .sp-credit-card {

        padding: 18px;

        border-radius: 22px;

        min-height: 170px;

        box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
    }

    /* TOP */
    .sp-credit-card__top span {

        font-size: 15px;
    }

    /* CHIP */
    .sp-chip {

        position: relative;

        width: 42px;
        height: 30px;

        border-radius: 8px;

        background: linear-gradient(
                135deg,
                #fbbf24,
                #f59e0b
        );

        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35),
        0 4px 10px rgba(245, 158, 11, 0.25);
    }

    /* خطوط داخل تراشه */
    .sp-chip::before,
    .sp-chip::after {

        content: "";

        position: absolute;

        background: rgba(255, 255, 255, 0.35);
    }

    .sp-chip::before {

        top: 6px;
        bottom: 6px;

        left: 50%;

        width: 2px;

        transform: translateX(-50%);
    }

    .sp-chip::after {

        left: 6px;
        right: 6px;

        top: 50%;

        height: 2px;

        transform: translateY(-50%);
    }

    /* AMOUNT */
    .sp-credit-card__amount {

        margin-top: 34px;
        font-size: 20px;

        line-height: 1.5;

        font-weight: 900;
    }

    /* FOOTER */
    .sp-credit-card__footer {

        margin-top: 24px;
    }

    .sp-credit-card__footer small {

        font-size: 10px;
    }

    .sp-credit-card__footer strong {

        font-size: 11px;
    }
}

/* ================= BUTTONS ================= */

.sp-btn {
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.2s ease;
}

/* Primary */
.sp-btn-primary {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
}

.sp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(249, 115, 22, 0.35);
}

/* Outline */
.sp-btn-outline {
    border: 1px solid #2563eb;
    color: #2563eb;
    background: transparent;
}

.sp-btn-outline:hover {
    background: rgba(37, 99, 235, 0.08);
}

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

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

.sp-trust {

    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 18px;
}

/* CARD */

.sp-trust-item {

    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 20px;

    border-radius: 22px;

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

    border: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);

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

    overflow: hidden;
}

/* TOP GLOW */

.sp-trust-item::before {

    content: "";

    position: absolute;

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

    height: 3px;

    background: linear-gradient(
            90deg,
            #f59e0b,
            #2563eb
    );

    opacity: 0.9;
}

/* HOVER */

.sp-trust-item:hover {

    transform: translateY(-4px);

    border-color: rgba(37, 99, 235, 0.10);

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

/* ICON */

.sp-trust-icon {

    min-width: 52px;
    width: 52px;
    height: 52px;

    border-radius: 16px;

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

    background: linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.12),
            rgba(37, 99, 235, 0.10)
    );

    color: #2563eb;

    font-size: 20px;

    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* CONTENT */

.sp-trust-content {

    flex: 1;
}

/* TITLE */

.sp-trust-title {

    font-size: 15px;

    font-weight: 800;

    color: #0f172a;
}

/* DESC */

.sp-trust-desc {

    margin-top: 6px;

    font-size: 13px;

    line-height: 1.8;

    color: #64748b;
}

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

@media (max-width: 640px) {

    .sp-trust {

        gap: 12px;
    }

    .sp-trust-item {

        padding: 16px;

        border-radius: 18px;
    }

    .sp-trust-icon {

        min-width: 46px;
        width: 46px;
        height: 46px;

        border-radius: 14px;
    }

    .sp-trust-title {

        font-size: 14px;
    }

    .sp-trust-desc {

        font-size: 12px;
    }
}

/* ================= STATS ================= */

/* ================= STATS ================= */

.sp-stats {
    margin-top: 20px;
    position: relative;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 26px;
    overflow: hidden;
    background: linear-gradient(
            135deg,
            #0f172a,
            #111827
    );

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

/* GLOW */

.sp-stats::before {

    content: "";

    position: absolute;
    inset: 0;

    background: radial-gradient(
            circle at top right,
            rgba(249, 115, 22, 0.18),
            transparent 30%
    ),
    radial-gradient(
            circle at bottom left,
            rgba(37, 99, 235, 0.16),
            transparent 35%
    );

    pointer-events: none;
}

/* CARD */

.sp-stat {

    position: relative;

    padding: 22px 18px;

    border-radius: 22px;

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

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

    backdrop-filter: blur(10px);

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

/* HOVER */

.sp-stat:hover {

    transform: translateY(-4px);

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

    border-color: rgba(249, 115, 22, 0.16);
}

/* NUMBER */

.sp-stat-num {

    font-size: 34px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -1px;

    color: #f59e0b;
}

/* LABEL */

.sp-stat-label {

    margin-top: 14px;

    font-size: 15px;

    font-weight: 800;

    color: white;
}

/* DESC */

.sp-stat-desc {

    margin-top: 8px;

    font-size: 13px;

    line-height: 1.9;

    color: rgba(255, 255, 255, 0.68);
}

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

@media (max-width: 980px) {

    .sp-stats {

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

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

@media (max-width: 640px) {

    .sp-stats {

        grid-template-columns: 1fr;

        gap: 12px;

        padding: 18px;
    }

    .sp-stat {

        padding: 18px 16px;

        border-radius: 18px;
    }

    .sp-stat-num {

        font-size: 28px;
    }

    .sp-stat-label {

        font-size: 14px;
    }

    .sp-stat-desc {

        font-size: 12px;

        line-height: 1.8;
    }
}

/* ================= ABOUT ================= */

/* ================= ABOUT ================= */

.sp-about {

    padding: 70px 16px;

    display: flex;
    justify-content: center;

    background: #ffffff;
}

/* CARD */

.sp-about__card {

    width: 100%;
    max-width: 920px;
    padding: 0 24px 0 18px;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
}

/* BADGE */

.sp-about__badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

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

    color: #f97316;

    background: rgba(249, 115, 22, 0.10);

    border: 1px solid rgba(249, 115, 22, 0.18);
}

/* TITLE */

.sp-about__title {

    margin-top: 16px;

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

    color: #0f172a;

    line-height: 1.4;
}

/* DESC */

.sp-about__desc {

    margin-top: 14px;

    font-size: 15px;

    line-height: 2.2;

    color: #475569;

    max-width: 780px;
}

/* highlight line */

.sp-about__card::before {

    content: "";

    position: absolute;

    right: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    background: linear-gradient(
            180deg,
            #f97316,
            #2563eb
    );

    border-radius: 3px;

    opacity: 0.9;
}

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

@media (max-width: 640px) {

    .sp-about {

        padding: 35px 14px;
    }

    .sp-about__title {

        font-size: 24px;
    }

    .sp-about__desc {

        font-size: 14px;

        line-height: 2.1;
    }
}

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

.sp-features {

    padding: 20px 16px;

    background: linear-gradient(
            180deg,
            #ffffff,
            #f8fafc
    );
}

/* HEADER */

.sp-features__header {

    text-align: center;

    max-width: 640px;

    margin: auto;
}

.sp-features__badge {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 999px;

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

    color: #f97316;

    background: rgba(249, 115, 22, 0.10);

    border: 1px solid rgba(249, 115, 22, 0.18);
}

.sp-features__header h2 {

    margin-top: 14px;

    font-size: 34px;

    font-weight: 900;

    color: #0f172a;
}

.sp-features__header p {

    margin-top: 10px;

    font-size: 14px;

    color: #64748b;

    line-height: 1.9;
}

/* GRID */

.sp-features__grid {

    margin-top: 26px;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 18px;
}

/* CARD */

.sp-feature-card {

    position: relative;

    padding: 22px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);

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

/* HOVER */

.sp-feature-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

/* ICON BASE */

.sp-feature-icon {

    width: 52px;
    height: 52px;

    border-radius: 16px;

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

    font-size: 20px;

    margin-bottom: 14px;
}

/* ICON COLORS (distinct but soft) */

.sp-feature-icon.orange {

    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
}

.sp-feature-icon.blue {

    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.sp-feature-icon.green {

    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.sp-feature-icon.purple {

    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}

/* TEXT */

.sp-feature-card h3 {

    font-size: 16px;

    font-weight: 800;

    color: #0f172a;
}

.sp-feature-card p {

    margin-top: 8px;

    font-size: 13px;

    line-height: 1.8;

    color: #64748b;
}

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

@media (max-width: 640px) {

    .sp-features {

        padding: 22px 14px;
    }

    .sp-features__header h2 {

        font-size: 24px;
    }

    .sp-feature-card {

        padding: 18px;
        border-radius: 20px;
    }

    .sp-feature-icon {

        width: 46px;
        height: 46px;

        border-radius: 14px;
        font-size: 18px;
    }
}


/* ================= STEPS ================= */

.sp-steps {
    padding: 40px 20px;
}

/* HEADER */

.sp-steps__header {
    text-align: center;
    max-width: 700px;
    margin: auto auto 50px;
}

.sp-steps__badge {
    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);

    color: #2563eb;

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

.sp-steps__header h2 {
    margin-top: 16px;

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

    color: #0f172a;
}

.sp-steps__header p {
    margin-top: 12px;

    color: #64748b;
    line-height: 2;
}

/* TIMELINE */

.sp-steps__timeline {
    position: relative;

    max-width: 900px;
    margin: auto;

    display: grid;
    gap: 22px;
}

/* LINE */

.sp-steps__timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    right: 26px;

    width: 2px;

    background: linear-gradient(
            180deg,
            rgba(249, 115, 22, 0.35),
            rgba(37, 99, 235, 0.18)
    );
}

/* STEP */

.sp-step {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 24px;

    border-radius: 22px;

    background: white;

    border: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);

    transition: 0.25s ease;
}

.sp-step:hover {
    transform: translateY(-3px);

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

/* NUMBER */

.sp-step__number {
    position: relative;
    z-index: 2;

    min-width: 54px;
    height: 54px;

    border-radius: 18px;

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

    background: linear-gradient(
            135deg,
            #f59e0b,
            #f97316
    );

    color: white;

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

    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);
}

/* CONTENT */

.sp-step__content h3 {
    font-size: 18px;
    font-weight: 800;

    color: #0f172a;
}

.sp-step__content p {
    margin-top: 8px;

    color: #64748b;

    line-height: 1.9;

    font-size: 14px;
}

/* MOBILE */

@media (max-width: 640px) {

    .sp-steps {
        padding: 25px 16px;
    }

    .sp-steps__header h2 {
        font-size: 26px;
    }

    .sp-step {
        padding: 18px;
    }

    .sp-step__number {
        min-width: 46px;
        height: 46px;

        font-size: 16px;
    }

    .sp-steps__timeline::before {
        right: 22px;
    }

}

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

.sp-final-cta {
    padding: 24px 16px;
    display: flex;
    justify-content: center;
    position: relative;
}

/* CARD */
.sp-final-cta__card {
    position: relative;
    width: 100%;
    max-width: 1000px;

    padding: 50px 30px;
    border-radius: 28px;

    background: linear-gradient(
            135deg,
            #0f172a,
            #111827
    );

    overflow: hidden;

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

/* GLOW */
.sp-final-cta__glow {
    position: absolute;
    inset: 0;

    background: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.25), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.18), transparent 50%);

    filter: blur(70px);
    opacity: 0.9;
}

/* CONTENT */
.sp-final-cta__content {
    position: relative;
    text-align: center;
    max-width: 650px;
    margin: auto;
}

/* BADGE */
.sp-final-cta__badge {
    display: inline-block;
    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);

    color: #f8fafc;

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

/* TITLE */
.sp-final-cta h2 {
    margin-top: 18px;

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

    color: #ffffff;
}

/* TEXT */
.sp-final-cta p {
    margin-top: 12px;

    font-size: 15px;
    line-height: 2;

    color: rgba(255, 255, 255, 0.75);
}

/* ACTIONS */
.sp-final-cta__actions {
    margin-top: 28px;

    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.sp-final-btn {
    padding: 12px 22px;
    border-radius: 14px;

    font-weight: 800;
    text-decoration: none;

    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;

    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.25);

    transition: 0.25s ease;
}

.sp-final-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 50px rgba(249, 115, 22, 0.35);
}

/* OUTLINE BUTTON */
.sp-final-btn-outline {
    padding: 12px 22px;
    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;

    text-decoration: none;
    font-weight: 700;

    transition: 0.2s ease;
}

.sp-final-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* MOBILE */
@media (max-width: 640px) {

    .sp-final-cta__card {
        padding: 40px 18px;
        border-radius: 22px;
    }

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

    .sp-final-cta p {
        font-size: 13px;
    }

    .sp-final-cta__actions {
        flex-direction: column;
    }

    .sp-final-btn,
    .sp-final-btn-outline {
        width: 100%;
        text-align: center;
    }
}

/*//////////////////////////////////////////*/
/* ================= SOCIAL PROOF ================= */

/* جلوگیری از اسکرول افقی کل صفحه */
body {
    overflow-x: hidden;
}

/* ================= SOCIAL PROOF ================= */

.sp-social-proof {
    padding: 25px 16px;
    background: #f8fafc;

    overflow-x: hidden; /* خیلی مهم */
}

/* HEADER */
.sp-social-proof__header {
    text-align: center;
    max-width: 700px;
    margin: auto auto 40px;
}

.sp-social-proof__badge {
    display: inline-block;
    padding: 6px 14px;

    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.18);

    color: #2563eb;
    font-size: 12px;
    font-weight: 700;

    border-radius: 999px;
}

.sp-social-proof__header h2 {
    margin-top: 12px;
    font-size: 28px;
    font-weight: 900;
}

.sp-social-proof__header p {
    margin-top: 8px;
    color: #64748b;
}

/* GRID */
.sp-social-proof__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    max-width: 1100px;
    margin: auto;

    overflow-x: hidden; /* مهم */
}

/* FAQ */
.sp-faq {
    background: white;
    border-radius: 20px;
    padding: 20px;

    border: 1px solid #e2e8f0;
}


.sp-faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 16px;

    background: #fff;

    overflow: hidden;

    margin-top: 10px;
}

.sp-faq-question {
    width: 100%;

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

    gap: 12px;

    padding: 16px;

    background: transparent;
    border: none;

    cursor: pointer;

    text-align: right;

    font-family: inherit;
}


.sp-faq-question span {
    font-size: 14px;
    font-weight: 800;

    color: #0f172a;
}

.sp-faq-arrow {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    color: #f97316;

    transition: transform 0.25s ease;
}

/* ANSWER */

.sp-faq-answer {
    display: grid;
    grid-template-rows: 0fr;

    transition: all 0.25s ease;
}

.sp-faq-answer-inner {
    overflow: hidden;

    padding: 0 16px;

    font-size: 13px;
    line-height: 2;

    color: #64748b;
}

/* ACTIVE */

.sp-faq-item.active .sp-faq-answer {
    grid-template-rows: 1fr;
}

.sp-faq-item.active .sp-faq-answer-inner {
    padding-bottom: 16px;
}

.sp-faq-item.active .sp-faq-arrow {
    transform: rotate(180deg);
}

/* RIGHT SIDE WRAPPER */
.sp-reviews-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;

    min-width: 0; /* جلوگیری از overflow flex */
}

/* FORM */
.sp-review-form {
    background: white;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
}

.sp-review-form h3 {
    margin-bottom: 10px;
}

.sp-review-form input,
.sp-review-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 8px;

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

    font-family: inherit;
}

.sp-review-form textarea {
    resize: none;
    height: 80px;
}

.sp-review-form button {
    margin-top: 10px;
    width: 100%;

    padding: 10px;

    border: none;
    border-radius: 12px;

    background: #2563eb;
    color: white;

    font-weight: 800;

    cursor: pointer;
}

/* ================= REVIEWS SCROLL ================= */

.sp-reviews-scroll {
    background: white;

    padding: 22px;

    border-radius: 22px;

    border: 1px solid #e2e8f0;

    overflow: hidden;
}

/* TRACK */

.sp-reviews-track {
    display: flex;

    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 10px;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;
}


.sp-reviews-header {
    margin-bottom: 14px;
}

.sp-reviews-header h3 {
    font-size: 18px;

    font-weight: 900;

    color: #0f172a;
}

/* CARD */

.sp-review-card {
    flex: 0 0 auto;

    width: 290px;

    background: #f8fafc;

    padding: 18px;

    border-radius: 18px;

    border: 1px solid #eef2f7;

    scroll-snap-align: start;

    height: 260px;

    display: flex;
    flex-direction: column;
}

.sp-review-title {
    font-size: 14px;

    font-weight: 900;

    color: #0f172a;

    margin-bottom: 5px;

    line-height: 1.7;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    min-height: 40px;
}

/* REVIEW TEXT */

.sp-review-card p {
    font-size: 13px;

    line-height: 2;

    font-weight: 700;

    overflow-y: auto;

    max-height: 115px;

    padding-left: 2px;
}

/* USER */

.sp-review-card span {
    display: block;

    margin-top: 8px;

    font-size: 13px;

    font-weight: 700;

    color: #64748b;
}

/* REPLY */

.sp-review-card small {
    display: block;

    margin-top: auto;

    font-size: 12px;

    line-height: 1.9;

    color: #2563eb;

    overflow-y: auto;

    max-height: 65px;

    padding-left: 2px;
}

.sp-review-reply-label {
    color: #f97316;

    font-weight: 900;
}

/* MOBILE */

@media (max-width: 768px) {

    .sp-social-proof__grid {
        grid-template-columns: 1fr;
    }

    .sp-reviews-track {
        gap: 12px;
    }

    .sp-review-card {
        width: 250px;
        height: 250px;
    }

    .sp-review-card p {
        font-size: 13px;
    }
}

/*///////////////////////////////////////////*/
/* بدون ضامن - Shield Check */
.i-lucide-shield-check {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* اعتبار فوری - Bolt */
.i-lucide-bolt {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E");
}

/* پرداخت امن - Lock */
.i-lucide-lock {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
}

/* پشتیبانی - Headset */
.i-lucide-headset {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v2a3 3 0 003 3h1'/%3E%3Cpath d='M20 14v2a3 3 0 01-3 3h-1'/%3E%3Cpath d='M4 14a8 8 0 0116 0'/%3E%3Crect x='2' y='14' width='4' height='6' rx='2'/%3E%3Crect x='18' y='14' width='4' height='6' rx='2'/%3E%3C/svg%3E");
}

[class^="i-lucide-"], [class*=" i-lucide-"] {
    display: inline-block;
    width: 20px;
    height: 20px;

    background-color: currentColor;

    -webkit-mask-image: var(--un-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-image: var(--un-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/*////////////////////////////////////////////////*/

/* ================= BOTTOM NAV (BRIGHT GLOSSY GLASS) ================= */

.sp-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
    z-index: 999;
    padding: 0 12px;
    display: flex;
    justify-content: center;
}

.sp-bottom-nav.hidden {
    transform: translateY(120%);
    opacity: 0;
}

/* container */

.sp-bottom-nav__container {
    width: 100%;
    max-width: 540px;

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

    gap: 6px;

    padding: 8px 10px;

    border-radius: 20px;

    /* 🔥 مهم: سفید براق نه محو */
    background: rgba(255, 255, 255, 0.88);

    /* glossy highlight layer */
    background-image: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.75)
    );

    backdrop-filter: blur(16px);

    border: 1px solid rgba(15, 23, 42, 0.10);

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.6) inset; /* ✨ gloss edge */

    /* slight lift */
    transform: translateY(0);
}

/* ITEM */

.sp-bottom-nav__item {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;

    padding: 7px 4px;

    border-radius: 14px;

    color: #475569;

    transition: all 0.2s ease;

    position: relative;
}

/* hover */

.sp-bottom-nav__item:hover {
    transform: translateY(-3px);
    color: #0f172a;
}

/* ACTIVE (strong visible) */

.sp-bottom-nav__item.active {
    color: #f97316;
}

/* ICON */

.sp-bottom-nav__icon {
    width: 38px;
    height: 38px;

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

    border-radius: 12px;

    background: rgba(15, 23, 42, 0.05);

    margin-bottom: 4px;

    transition: all 0.2s ease;

    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* active icon */

.sp-bottom-nav__item.active .sp-bottom-nav__icon {
    background: rgba(249, 115, 22, 0.18);
    color: #f97316;

    box-shadow: 0 8px 18px rgba(249, 115, 22, 0.22);
}

/* TEXT */

.sp-bottom-nav__item span {
    font-size: 10.5px;
    font-weight: 800;

    color: inherit;
}

/* BADGE */

.sp-bottom-nav__badge {
    position: absolute;
    top: -4px;
    right: 8px;

    min-width: 16px;
    height: 16px;

    padding: 0 5px;

    border-radius: 999px;

    background: linear-gradient(135deg, #f97316, #f59e0b);

    color: #fff;

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

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

    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.30);
}

/* divider (very soft but visible) */
.sp-bottom-nav__item:not(:last-child)::after {
    content: "";

    position: absolute;
    right: -3px;
    top: 28%;

    width: 1px;
    height: 44%;

    background: rgba(15, 23, 42, 0.08);
}

/* mobile only */
@media (min-width: 768px) {
    .sp-bottom-nav {
        display: none;
    }
}

/* safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sp-bottom-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
}

.i-lucide-store {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1-5h16l1 5'/%3E%3Cpath d='M4 9h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.i-lucide-wallet {
    --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z'/%3E%3Cpath d='M16 12h4'/%3E%3Ccircle cx='16' cy='12' r='1'/%3E%3C/svg%3E");
}

.sp-icon-bg {
    background: linear-gradient(
            135deg,
            rgba(249, 115, 22, 0.12),
            rgba(249, 115, 22, 0.05)
    );
    color: #f97316;
}

.sp-title-request {
    font-size: 1.2rem; /* ~24px */
    font-weight: 650;
    line-height: 1.3;
    color: #0f172a; /* slate-900 */
    letter-spacing: -0.02em;
}

.sp-title__accent {
    color: #f97316; /* starpay orange */
}