/**
 * Portfolio (Our Work) Hub — page-our-work.php
 * Redesigned with cinematic hero, count-up numbers, bento grid,
 * Swiper carousel, vertical timeline, marquee testimonials, dramatic CTA.
 *
 * All animations are 2D (transform + opacity + filter) for smooth GPU rendering.
 */

:root {
    --pf-bg-soft: #f8fafc;
    --pf-bg-page: #ffffff;
    --pf-line:    #e2e8f0;
    --pf-text:    #0f172a;
    --pf-body:    #475569;
    --pf-muted:   #94a3b8;
}

.pf-page {
    background: var(--pf-bg-page);
    color: var(--pf-text);
    direction: rtl;
    overflow-x: hidden;
    font-family: 'Tajawal', 'Cairo', sans-serif;
}
.pf-page .container { position: relative; z-index: 2; }
.pf-page h1, .pf-page h2, .pf-page h3, .pf-page h4,
.pf-page p,  .pf-page span, .pf-page strong, .pf-page a, .pf-page button {
    font-family: inherit;
}

/* ============= Section heading block ============= */
.pf-section-head {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
    z-index: 2;
}
.pf-section-head .section-badge { margin: 0 auto 12px; display: inline-block; }
.pf-section-title {
    font-family: 'Tajawal', sans-serif;
    font-size: clamp(28px, 3.8vw, 46px);
    font-weight: 900;
    color: var(--pf-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

/* ============= Reveal-on-scroll animations ============= */
[data-pf-fade] {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
[data-pf-fade="up"]    { transform: translateY(40px); }
[data-pf-fade="left"]  { transform: translateX(-50px); }
[data-pf-fade="right"] { transform: translateX(50px); }
[data-pf-fade="zoom"]  { transform: scale(0.92); }
[data-pf-fade].pf-in {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    [data-pf-fade] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============= Section background patterns ============= */
.pf-section-bg { position: relative; }
.pf-section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}
.pf-section-bg--dots::before {
    background-image: radial-gradient(circle, rgba(47,90,174,0.15) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
}
.pf-section-bg--grid::before {
    background-image:
        linear-gradient(rgba(47,90,174,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,90,174,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}
.pf-section-bg--waves::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'><path d='M0 20 Q 25 0, 50 20 T 100 20' fill='none' stroke='%232f5aae' stroke-width='1.4' opacity='0.18'/></svg>");
    background-size: 100px 40px;
}
.pf-section-bg--diag::before {
    background-image: repeating-linear-gradient(45deg, rgba(39,174,96,0.07) 0 2px, transparent 2px 22px);
}
.pf-section-bg--quote::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><text x='10' y='62' font-size='80' font-family='serif' fill='%232f5aae' opacity='0.07'>%E2%80%9C</text></svg>");
    background-size: 200px 200px;
}
.pf-section-bg--soft::before {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(47,90,174,0.10), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(39,174,96,0.10), transparent 40%);
    opacity: 1;
}

/* Centered section head + subtitle helper */
.pf-section-head--center { text-align: center; }
.pf-section-sub {
    margin: 12px auto 0;
    max-width: 720px;
    color: #475569;
    font-size: 16.5px;
    line-height: 1.85;
}

/* ============= Industries section (sub-categories cards) ============= */
.pf-inds {
    padding: clamp(70px, 9vw, 110px) 0;
}
.pf-inds-grid {
    position: relative;
    z-index: 2;
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1080px) { .pf-inds-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .pf-inds-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px)  { .pf-inds-grid { grid-template-columns: 1fr; } }

.pf-ind-card {
    --ind-color:    #2f5aae;
    --ind-grad-end: #16c172;
    --ind-bg:       #eaf1ff;
    position: relative;
    display: block;
    padding: 26px 22px 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.pf-ind-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ind-color), var(--ind-grad-end));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}
.pf-ind-card::after {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: var(--ind-color);
    opacity: 0.10;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.pf-ind-card:hover {
    transform: translateY(-6px);
    border-color: var(--ind-color);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}
.pf-ind-card:hover::before { transform: scaleX(1); }
.pf-ind-card:hover::after  { transform: scale(1.4); opacity: 0.18; }

.pf-ind-card__num {
    position: absolute;
    top: 18px;
    inset-inline-end: 22px;
    font-size: 14px;
    font-weight: 900;
    color: var(--ind-color);
    opacity: 0.40;
    letter-spacing: -0.02em;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.pf-ind-card:hover .pf-ind-card__num { opacity: 0.85; }

.pf-ind-card__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    background: var(--ind-bg);
    border-radius: 16px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}
.pf-ind-card:hover .pf-ind-card__icon { transform: scale(1.08) rotate(-4deg); }

.pf-ind-card__title {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.pf-ind-card__desc {
    position: relative;
    z-index: 1;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.7;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pf-ind-card__arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ind-bg);
    color: var(--ind-color);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.pf-ind-card:hover .pf-ind-card__arrow {
    background: var(--ind-color);
    color: #fff;
    transform: translateX(-4px);
}

/* 6 color themes cycled across cards */
.pf-ind-card--theme-0 { --ind-color: #2f5aae; --ind-grad-end: #16c172; --ind-bg: #eaf1ff; }
.pf-ind-card--theme-1 { --ind-color: #a855f7; --ind-grad-end: #ec4899; --ind-bg: #f4e9ff; }
.pf-ind-card--theme-2 { --ind-color: #f97316; --ind-grad-end: #ef4444; --ind-bg: #fff1e6; }
.pf-ind-card--theme-3 { --ind-color: #0891b2; --ind-grad-end: #14b8a6; --ind-bg: #e0f5fa; }
.pf-ind-card--theme-4 { --ind-color: #f59e0b; --ind-grad-end: #f97316; --ind-bg: #fef3c7; }
.pf-ind-card--theme-5 { --ind-color: #16c172; --ind-grad-end: #0891b2; --ind-bg: #e6fbef; }

.pf-inds-cta {
    margin-top: 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}
.pf-btn--ghost-dark {
    background: #fff;
    color: #2f5aae;
    border: 2px solid #2f5aae;
}
.pf-btn--ghost-dark:hover {
    background: #2f5aae;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(47, 90, 174, 0.30);
}

/* ============= Buttons ============= */
.pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    text-decoration: none;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
}
.pf-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}
.pf-btn:hover::after { left: 100%; }
.pf-btn--primary {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: #fff;
    box-shadow: 0 10px 28px rgba(39, 174, 96, 0.38);
}
.pf-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(39, 174, 96, 0.5); color: #fff; }
.pf-btn--ghost {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
}
.pf-btn--ghost:hover { background: #fff; color: var(--brand); border-color: #fff; transform: translateY(-3px); }
.pf-btn--whatsapp { background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4); }
.pf-btn--whatsapp:hover { background: #128c7e; color: #fff; transform: translateY(-3px); }
.pf-cta .pf-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }

/* ============= HERO — Cinematic mesh + orbs + animated stats ============= */
.pf-hero {
    position: relative;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 50%, var(--green) 100%);
    color: #fff;
    padding: clamp(110px, 14vw, 230px) 0;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.pf-hero.has-bg {
    background-size: cover;
    background-position: center;
}
.pf-hero__overlay {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(47,90,174,0.6), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(39,174,96,0.55), transparent 50%),
        linear-gradient(135deg, rgba(15,23,42,0.78) 0%, rgba(47,90,174,0.7) 50%, rgba(39,174,96,0.65) 100%);
}

/* Animated mesh gradient (conic, slowly rotating) */
.pf-hero__mesh {
    position: absolute; inset: -10%; z-index: 0;
    background:
        conic-gradient(from 0deg at 30% 40%,
            rgba(47,90,174,0.55),
            rgba(8,145,178,0.4),
            rgba(39,174,96,0.5),
            rgba(245,158,11,0.35),
            rgba(47,90,174,0.55));
    filter: blur(60px);
    opacity: 0.55;
    animation: pfMeshSpin 24s linear infinite;
}
@keyframes pfMeshSpin {
    to { transform: rotate(360deg); }
}

/* Glowing orbs */
.pf-hero__orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.55;
    animation: pfOrbDrift 14s ease-in-out infinite;
}
.pf-orb--1 { width: 380px; height: 380px; background: #4169b0; top: -120px; right: -100px; }
.pf-orb--2 { width: 280px; height: 280px; background: #27ae60; bottom: -80px; left: -60px; animation-delay: -4s; }
.pf-orb--3 { width: 200px; height: 200px; background: #0891b2; top: 30%; left: 40%; animation-delay: -8s; }
.pf-orb--4 { width: 160px; height: 160px; background: #f59e0b; bottom: 25%; right: 25%; animation-delay: -11s; opacity: 0.4; }
@keyframes pfOrbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}

.pf-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 60px;
}
.pf-hero__main {
    text-align: start;  /* RTL: aligns to the right edge */
}
.pf-hero__main .pf-hero__title { text-align: start; }
.pf-hero__main .pf-hero__stat-strip { margin-inline-start: 0; }
.pf-hero__main .pf-hero__ctas { justify-content: flex-start; }
@media (max-width: 980px) {
    .pf-hero__content { grid-template-columns: 1fr; gap: 40px; }
    .pf-hero__main { text-align: center; }
    .pf-hero__main .pf-hero__title { text-align: center; }
    .pf-hero__main .pf-hero__ctas { justify-content: center; }
}

/* Hero title — letter-by-letter reveal via JS */
.pf-hero__title {
    font-family: 'Tajawal', sans-serif;
    font-size: clamp(34px, 5.6vw, 64px);
    font-weight: 900;
    margin: 0 0 16px;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
/* Word-level reveal — preserves Arabic ligatures (chars stay connected) */
.pf-hero__title .pf-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.pf-hero__title.pf-text-in .pf-word {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .pf-hero__title .pf-word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.pf-hero__subtitle {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 0 0 16px;
}
.pf-hero__desc {
    font-size: clamp(15px, 1.6vw, 17px);
    color: rgba(255,255,255,0.9);
    line-height: 1.85;
    margin: 0 auto 18px;
    max-width: 760px;
}
.pf-hero__tags {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    background: rgba(0,0,0,0.18);
    font-size: 13.5px;
    color: rgba(255,255,255,0.95);
    margin: 0 0 30px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255,255,255,0.15);
}
.pf-hero__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============= HERO — NEW: status pill + word rotator + tag marquee ============= */

/* Status pill at the top */
.pf-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 22px;
}
.pf-hero__status-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: pfHeroPulseDot 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes pfHeroPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Title — two parts: static label + rotating word */
.pf-hero__title-static {
    display: block;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

/* Rotating word container — fixed-height window, words slide vertically */
.pf-hero__rotator {
    display: inline-block;
    height: 1.15em;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.15;
    position: relative;
    /* Glow + underline accent */
    padding: 0 12px;
}
.pf-hero__rotator::after {
    content: "";
    position: absolute;
    bottom: -8px; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--green), var(--green-light));
    border-radius: 4px;
    opacity: 0.6;
}
.pf-hero__rotator-track {
    animation: pfHeroRotate 15s steps(1) infinite;  /* 5 words × 3s + reset */
}
.pf-hero__rotator-track > span {
    display: block;
    height: 1.15em;
    color: #fff;
    background: linear-gradient(135deg, #fde68a, #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}
@keyframes pfHeroRotate {
    0%, 16.6%   { transform: translateY(0); }
    20%, 36.6%  { transform: translateY(-1.15em); }
    40%, 56.6%  { transform: translateY(-2.3em); }
    60%, 76.6%  { transform: translateY(-3.45em); }
    80%, 96.6%  { transform: translateY(-4.6em); }
    100%        { transform: translateY(-5.75em); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-hero__rotator-track { animation: none; }
}

/* The full title becomes inline */
.pf-hero__title {
    text-align: center;
}

/* Inline stat strip — pills with vertical separators */
.pf-hero__stat-strip {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 16px 32px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    margin: 30px 0 28px;
    flex-wrap: wrap;
    justify-content: center;
}
.pf-hero__stat-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: #fff;
}
.pf-hero__stat-item strong {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 900;
    direction: ltr;
    background: linear-gradient(135deg, #fde68a, #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pf-hero__stat-item span {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}
.pf-hero__stat-sep {
    width: 1px; height: 28px;
    background: rgba(255,255,255,0.25);
}

/* Interactive scatter playground — drag/throw tags */
.pf-hero__playground {
    position: relative;
    z-index: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pf-hero__scatter {
    position: relative;
    width: 100%;
    min-height: 540px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    border: 1.5px dashed rgba(255,255,255,0.22);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.pf-hero__scatter-hint {
    position: absolute;
    top: 14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(0,0,0,0.22);
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.pf-hero__scatter.is-played .pf-hero__scatter-hint { opacity: 0; }
.pf-hero__scatter-hint svg { animation: pfHintBob 1.6s ease-in-out infinite; }
@keyframes pfHintBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* Each scatter tag — physics-driven via --x/--y CSS variables (set every frame by JS) */
.pf-hero__scatter-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 14px 26px;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    color: #1e3a6f;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
    /* No transition on transform — physics owns --x/--y; --s drives the hover scale */
    transition: box-shadow 0.3s ease, --s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    will-change: transform;
}
/* Color tint variants — by data-tint */
.pf-hero__scatter-tag[data-tint="0"] { background: linear-gradient(135deg, #fff, #dbeafe); color: #1e3a6f; }
.pf-hero__scatter-tag[data-tint="1"] { background: linear-gradient(135deg, #fff, #dcfce7); color: #15803d; }
.pf-hero__scatter-tag[data-tint="2"] { background: linear-gradient(135deg, #fff, #fef3c7); color: #92400e; }
.pf-hero__scatter-tag[data-tint="3"] { background: linear-gradient(135deg, #fff, #fce7f3); color: #9d174d; }
.pf-hero__scatter-tag[data-tint="4"] { background: linear-gradient(135deg, #fff, #ede9fe); color: #5b21b6; }

/* Hover effect — tag jumps forward, scales up, shadow blooms (replaces drag) */
.pf-hero__scatter-tag:hover {
    box-shadow: 0 18px 38px rgba(0,0,0,0.35);
    z-index: 50;
    --s: 1.12;
    animation: pfTagJiggle 0.6s ease-in-out;
}
@keyframes pfTagJiggle {
    0%, 100% { --r-extra: 0deg; }
    25%      { --r-extra: -5deg; }
    50%      { --r-extra:  5deg; }
    75%      { --r-extra: -3deg; }
}
/* Register the custom property so transitions work cross-browser */
@property --s {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

/* Reset button removed — physics now drops tags back automatically */

@media (max-width: 980px) {
    /* Keep playground visible on mobile, just shrink the box height */
    .pf-hero__scatter { min-height: 420px; }
}
@media (max-width: 560px) {
    .pf-hero__scatter { min-height: 360px; }
    .pf-hero__scatter-tag { padding: 11px 20px; font-size: 14.5px; }
}

/* Floating decorative shapes */
.pf-hero__shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.pf-hero__shape--ring1 {
    width: 110px; height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
    top: 18%;
    inset-inline-start: 8%;
    animation: pfShapeFloat 9s ease-in-out infinite;
}
.pf-hero__shape--ring2 {
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    bottom: 22%;
    inset-inline-end: 12%;
    animation: pfShapeFloat 11s ease-in-out infinite reverse;
}
.pf-hero__shape--square {
    width: 50px; height: 50px;
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 8px;
    top: 25%;
    inset-inline-end: 14%;
    transform: rotate(15deg);
    animation: pfShapeSpin 22s linear infinite;
}
.pf-hero__shape--diamond {
    width: 42px; height: 42px;
    top: 60%;
    inset-inline-start: 14%;
    animation: pfShapeFloat 10s ease-in-out infinite,
               pfShapeSpinSlow 26s linear infinite;
}
.pf-hero__shape--diamond svg { width: 100%; height: 100%; display: block; }
.pf-hero__shape--plus {
    width: 32px; height: 32px;
    top: 38%;
    inset-inline-end: 8%;
    animation: pfShapeFloat 7s ease-in-out infinite reverse;
}
.pf-hero__shape--plus svg { width: 100%; height: 100%; display: block; }

/* Sparkle accents */
.pf-hero__sparkle {
    position: absolute;
    width: 22px; height: 22px;
    color: #fde68a;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(253, 230, 138, 0.5));
    animation: pfSparkleTwinkle 3s ease-in-out infinite;
}
.pf-hero__sparkle svg { width: 100%; height: 100%; display: block; }
.pf-hero__sparkle--1 { top: 28%; inset-inline-start: 24%; }
.pf-hero__sparkle--2 { bottom: 30%; inset-inline-end: 26%; width: 28px; height: 28px; animation-delay: -1.5s; color: #fff; }

@media (max-width: 680px) {
    .pf-hero__title-static { font-size: 22px; }
    .pf-hero__rotator { padding: 0 8px; }
    .pf-hero__stat-strip { padding: 12px 16px; gap: 14px; }
    .pf-hero__stat-sep { display: none; }
    .pf-hero__shape, .pf-hero__sparkle { display: none; }  /* declutter mobile */
}

/* Subtle scroll cue at bottom of hero */
.pf-hero__scroll-cue {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 38px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 14px;
    z-index: 2;
}
.pf-hero__scroll-cue span {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 8px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    animation: pfScrollCue 1.6s ease-in-out infinite;
}
@keyframes pfScrollCue {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    50%  { opacity: 0.3; transform: translate(-50%, 14px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* ============= NUMBERS — count-up cards (redesigned) ============= */
.pf-numbers { padding: clamp(70px, 9vw, 120px) 0; background: var(--pf-bg-soft); }
.pf-numbers__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* second row (orphans) auto-centers */
    gap: 22px;
    margin: 28px auto 0;
    max-width: 1140px;
}
/* 3 per row on desktop — uses calc to fit exactly 3 + the 22px gaps */
.pf-numbers__grid > .pf-number {
    flex: 0 0 calc((100% - 44px) / 3);
    max-width: 340px;
}
@media (max-width: 980px) {
    .pf-numbers__grid > .pf-number { flex-basis: calc((100% - 22px) / 2); }
}
@media (max-width: 560px) {
    .pf-numbers__grid > .pf-number { flex-basis: 100%; max-width: 100%; }
}
.pf-number {
    background: #fff;
    padding: 38px 26px 32px;
    border-radius: 22px;
    border: 1.5px solid var(--pf-line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Shimmer sweep — light line crosses each card on a long loop */
.pf-number .pf-number__shine {
    position: absolute;
    top: -50%; left: -100%;
    width: 60%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    animation: pfNumShine 8s ease-in-out infinite;
    z-index: 1;
}
.pf-number:nth-child(2) .pf-number__shine { animation-delay: -1.5s; }
.pf-number:nth-child(3) .pf-number__shine { animation-delay: -3s; }
.pf-number:nth-child(4) .pf-number__shine { animation-delay: -4.5s; }
.pf-number:nth-child(5) .pf-number__shine { animation-delay: -6s; }
@keyframes pfNumShine {
    0%, 70%   { left: -100%; }
    85%       { left: 130%; }
    100%      { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-number__shine { animation: none; display: none; }
}
/* Soft tinted backdrop blob in the corner — picks up the icon's color */
.pf-number::before {
    content: "";
    position: absolute;
    top: -50px; inset-inline-end: -50px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--ci-tint, var(--brand));
    opacity: 0.08;
    transition: transform 0.5s ease, opacity 0.5s ease;
    z-index: -1;
}
.pf-number:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.14);
    border-color: var(--ci-tint, var(--brand));
}
.pf-number:hover::before {
    transform: scale(1.4);
    opacity: 0.18;
}

.pf-number__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: pfNumIconBob 3.4s ease-in-out infinite;
}
.pf-number:nth-child(2n) .pf-number__icon { animation-delay: -1.2s; }
.pf-number:nth-child(3n) .pf-number__icon { animation-delay: -2.2s; }
@keyframes pfNumIconBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.pf-number:hover .pf-number__icon { transform: rotate(-6deg) scale(1.1); animation-play-state: paused; }

/* Color-icon wrapper — colored backdrop disc + the SVG centered on it */
.pf-color-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%),
        color-mix(in srgb, var(--ci-tint, #3b82f6) 16%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--ci-tint, #3b82f6) 28%, transparent);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--ci-tint, #3b82f6) 22%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Two pulsing rings expanding outward — staggered */
.pf-color-icon::before,
.pf-color-icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--ci-tint, #3b82f6);
    opacity: 0;
    pointer-events: none;
}
.pf-color-icon::before { animation: pfRingPulse 2.6s ease-out infinite; }
.pf-color-icon::after  { animation: pfRingPulse 2.6s ease-out infinite; animation-delay: -1.3s; }
@keyframes pfRingPulse {
    0%   { opacity: 0.55; transform: scale(1); }
    80%  { opacity: 0; transform: scale(1.45); }
    100% { opacity: 0; transform: scale(1.45); }
}
.pf-color-icon svg {
    width: 70%;
    height: 70%;
    display: block;
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .pf-number__icon,
    .pf-color-icon::before,
    .pf-color-icon::after { animation: none; }
}
/* Pass the tint into the parent .pf-number so card hover effects can use it */
.pf-number .pf-color-icon { --pf-tint-source: var(--ci-tint); }
.pf-number { --ci-tint: var(--pf-tint-source, #3b82f6); }

.pf-number__val {
    display: block;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 900;
    background: linear-gradient(135deg, var(--brand), var(--green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 10px;
    direction: ltr;
    letter-spacing: -0.5px;
}
.pf-number__lbl {
    font-size: 14px;
    color: var(--pf-body);
    font-weight: 700;
    line-height: 1.5;
}

/* ============= CATEGORIES — Redesigned grid with numbered badges ============= */
.pf-cats { padding: clamp(70px, 9vw, 120px) 0; }
.pf-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.pf-cat-card {
    --card-tint: var(--brand);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    border: 1.5px solid var(--pf-line);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    position: relative;
    isolation: isolate;
}
.pf-cat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.15);
    color: inherit;
    border-color: transparent;
}

/* Colored pastel backgrounds — 16 unique tints, cycle every 16 cards */
.pf-cat-card:nth-child(16n+1)  { background: #f0f6fc; border-color: #cfe1f3; }  /* sky blue */
.pf-cat-card:nth-child(16n+2)  { background: #fcf6ec; border-color: #f0dfb8; }  /* peach cream */
.pf-cat-card:nth-child(16n+3)  { background: #f0f7f2; border-color: #c8debe; }  /* mint */
.pf-cat-card:nth-child(16n+4)  { background: #f5f0fa; border-color: #d8c5ec; }  /* lavender */
.pf-cat-card:nth-child(16n+5)  { background: #fdefe8; border-color: #f5cdb8; }  /* rose */
.pf-cat-card:nth-child(16n+6)  { background: #eef5f0; border-color: #c4dccc; }  /* sage */
.pf-cat-card:nth-child(16n+7)  { background: #fbf5e6; border-color: #ecdba9; }  /* wheat */
.pf-cat-card:nth-child(16n+8)  { background: #fde8e0; border-color: #f6b69d; }  /* coral */
.pf-cat-card:nth-child(16n+9)  { background: #f0ecf5; border-color: #cabddc; }  /* lilac */
.pf-cat-card:nth-child(16n+10) { background: #eef3f8; border-color: #c4d8e9; }  /* powder blue */
.pf-cat-card:nth-child(16n+11) { background: #f5f8eb; border-color: #d3dfb8; }  /* celery */
.pf-cat-card:nth-child(16n+12) { background: #ecf3f3; border-color: #b8d4d6; }  /* aqua */
.pf-cat-card:nth-child(16n+13) { background: #fbeef3; border-color: #efc9d9; }  /* pink */
.pf-cat-card:nth-child(16n+14) { background: #fefae8; border-color: #f4e4a4; }  /* lemon */
.pf-cat-card:nth-child(16n+15) { background: #eff1f8; border-color: #c8cee5; }  /* periwinkle */
.pf-cat-card:nth-child(16n)    { background: #fdebe2; border-color: #f5c4b0; }  /* salmon */

/* Decorative blob on each card — picks up the icon's tint via inheritance */
.pf-cat-card::before {
    content: "";
    position: absolute;
    top: -60px;
    inset-inline-end: -60px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    filter: blur(8px);
    z-index: 1;
    transition: transform 0.6s ease, opacity 0.5s ease;
    opacity: 0.7;
}
.pf-cat-card:hover::before {
    transform: scale(1.4);
    opacity: 0.9;
}

/* Top accent bar — colored, slides in from inline-start on hover */
.pf-cat-card__accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2f5aae, #338eaa, #27ae60);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 4;
    pointer-events: none;
}
.pf-cat-card:hover .pf-cat-card__accent { transform: scaleX(1); }

/* Numbered badge — top-left corner */
.pf-cat-card__num {
    position: absolute;
    top: 16px;
    inset-inline-end: 18px;
    z-index: 3;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: var(--pf-text);
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
    direction: ltr;
}
.pf-cat-card:hover .pf-cat-card__num {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: #fff;
    border-color: transparent;
    transform: scale(1.06);
}

/* Diagonal shine that sweeps across on hover */
.pf-cat-card__shine {
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    transition: left 0.8s ease;
    z-index: 2;
}
.pf-cat-card:hover .pf-cat-card__shine { left: 140%; }

/* Optional thumbnail on top */
.pf-cat-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    position: relative;
}
.pf-cat-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-cat-card:hover .pf-cat-card__thumb img { transform: scale(1.1); }
.pf-cat-card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5));
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

/* Body */
.pf-cat-card__body {
    padding: 30px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    position: relative;
    z-index: 2;  /* keep content above the decorative blob */
}

/* The colored icon wrapper — animated bob + ring pulse on hover */
.pf-cat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    align-self: flex-start;
}
.pf-cat-card:hover .pf-cat-card__icon { transform: rotate(-8deg) scale(1.1); }

.pf-cat-card__title {
    font-size: 19px;
    font-weight: 900;
    color: var(--pf-text);
    margin: 0;
    line-height: 1.35;
}

.pf-cat-card__desc {
    font-size: 13.5px;
    color: var(--pf-body);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* CTA — green pill ALWAYS (not just on hover) */
.pf-cat-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 14px;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    border: none;
    box-shadow: 0 6px 14px rgba(39, 174, 96, 0.3);
    transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
}
.pf-cat-card:hover .pf-cat-card__cta {
    background: linear-gradient(135deg, var(--green-light), var(--green));
    gap: 12px;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(39, 174, 96, 0.45);
}
.pf-cat-card__cta svg { transition: transform 0.3s ease; }
.pf-cat-card:hover .pf-cat-card__cta svg { transform: translateX(-4px); }

.pf-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 24px;
    color: var(--pf-muted);
    font-size: 15px;
    background: var(--pf-bg-soft);
    border: 1.5px dashed var(--pf-line);
    border-radius: 16px;
    margin-top: 14px;
}

/* ============= FEATURED PROJECTS — Swiper carousel ============= */
.pf-featured { padding: clamp(70px, 9vw, 120px) 0; background: var(--pf-bg-soft); }
.pf-featured__wrap { position: relative; padding: 0 50px; }
.pf-featured-swiper { padding: 14px 0 50px; overflow: visible; }
.pf-featured-swiper .swiper-wrapper { align-items: stretch; }
.pf-featured-swiper .swiper-slide { height: auto; }
.pf-feat-card {
    background: #fff;
    padding: 32px 28px;
    border-radius: 20px;
    border: 1.5px solid var(--pf-line);
    border-inline-start: 5px solid var(--brand);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pf-feat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
    border-inline-start-color: var(--green);
}
.pf-feat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px; height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(47, 90, 174, 0.1), rgba(39, 174, 96, 0.1));
    margin-bottom: 4px;
}
.pf-feat-card__icon img { width: 40px; height: 40px; display: block; }
.pf-feat-card__title { font-size: 19px; font-weight: 900; color: var(--pf-text); margin: 0; }
.pf-feat-card__what { font-size: 14px; color: var(--pf-body); line-height: 1.7; margin: 0; flex: 1; }
.pf-feat-card__result {
    background: linear-gradient(135deg, rgba(39,174,96,0.12), rgba(46,204,113,0.12));
    color: var(--green);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    border: 1px solid rgba(39, 174, 96, 0.22);
    text-align: center;
}
.pf-feat-card__result strong { color: var(--green); }

/* Swiper navigation buttons */
.pf-swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--pf-line);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    z-index: 5;
}
.pf-swiper-nav--prev { right: 0; }
.pf-swiper-nav--next { left: 0; }
.pf-swiper-nav:hover { background: var(--brand); color: #fff; transform: translateY(-50%) scale(1.06); }
.pf-swiper-nav.is-disabled { opacity: 0.35; pointer-events: none; }

.pf-featured-swiper__pagination {
    bottom: 0 !important;
    text-align: center;
}
.pf-featured-swiper__pagination .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: var(--pf-muted);
    opacity: 0.5;
    transition: width 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.pf-featured-swiper__pagination .swiper-pagination-bullet-active {
    background: var(--brand);
    opacity: 1;
    width: 26px;
    border-radius: 999px;
}

/* ============= WHY US — Horizontal feature rows ============= */
.pf-why { padding: clamp(70px, 9vw, 120px) 0; }
.pf-why-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 36px auto 0;
    max-width: 920px;
}

/* Each row — full-width horizontal card */
.pf-why-row {
    --row-tint: #2f5aae;
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 22px 28px 22px 24px;
    background: #fff;
    border: 1.5px solid var(--pf-line);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease,
                background 0.35s ease;
}

/* Cycling tints — each row picks up its own color from the icon family */
.pf-why-rows > .pf-why-row:nth-child(5n+1) { --row-tint: #3b82f6; }  /* blue */
.pf-why-rows > .pf-why-row:nth-child(5n+2) { --row-tint: #22c55e; }  /* green */
.pf-why-rows > .pf-why-row:nth-child(5n+3) { --row-tint: #ef4444; }  /* red */
.pf-why-rows > .pf-why-row:nth-child(5n+4) { --row-tint: #a855f7; }  /* purple */
.pf-why-rows > .pf-why-row:nth-child(5n)   { --row-tint: #f59e0b; }  /* amber */

/* Inline-start accent bar — grows from 4px → 6px on hover and tints to the row color */
.pf-why-row::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    inset-inline-start: 0;
    width: 4px;
    background: var(--row-tint);
    border-radius: 0 4px 4px 0;
    transition: width 0.35s ease;
}
.pf-why-row:hover::before { width: 8px; }

/* Soft tinted backdrop appears on hover (color-mix gives a 6% wash) */
.pf-why-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--row-tint) 6%, #fff);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.pf-why-row:hover {
    transform: translateX(-6px);  /* RTL: visually moves toward inline-end */
    box-shadow: 0 14px 32px color-mix(in srgb, var(--row-tint) 18%, transparent);
    border-color: transparent;
}
.pf-why-row:hover::after { opacity: 1; }

/* Huge watermark number on the inline-start */
.pf-why-row__watermark {
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--row-tint) 35%, transparent);
            text-stroke: 1.5px color-mix(in srgb, var(--row-tint) 35%, transparent);
    direction: ltr;
    transition: -webkit-text-stroke-color 0.35s ease,
                color 0.35s ease,
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 56px;
    text-align: center;
}
.pf-why-row:hover .pf-why-row__watermark {
    color: var(--row-tint);
    -webkit-text-stroke-color: transparent;
    transform: scale(1.08);
}

/* Colored icon */
.pf-why-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pf-why-row:hover .pf-why-row__icon { transform: rotate(-8deg) scale(1.08); }

/* Body — title + animated underline */
.pf-why-row__body {
    min-width: 0;
    position: relative;
    padding: 6px 0;
}
.pf-why-row__title {
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 900;
    color: var(--pf-text);
    line-height: 1.5;
    margin: 0 0 8px;
}
/* Animated underline — grows from start on hover */
.pf-why-row__line {
    display: block;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--row-tint), color-mix(in srgb, var(--row-tint) 50%, var(--green)));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-why-row:hover .pf-why-row__line { width: 60%; }

/* Arrow on the inline-end */
.pf-why-row__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--pf-bg-soft);
    color: var(--pf-muted);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.pf-why-row:hover .pf-why-row__arrow {
    background: var(--row-tint);
    color: #fff;
    transform: translateX(-4px);  /* RTL: toward inline-start (visually left) */
    box-shadow: 0 8px 18px color-mix(in srgb, var(--row-tint) 35%, transparent);
}

@media (max-width: 680px) {
    .pf-why-row {
        grid-template-columns: auto auto 1fr;
        gap: 14px;
        padding: 18px 18px 18px 16px;
    }
    .pf-why-row__watermark { font-size: 38px; min-width: 38px; }
    .pf-why-row__arrow { display: none; }
    .pf-why-row__title { font-size: 15px; }
}

/* ============= TESTIMONIALS — Marquee ============= */
.pf-testimonials { padding: clamp(70px, 9vw, 120px) 0; background: var(--pf-bg-soft); direction: ltr; }
.pf-testimonials .pf-section-head,
.pf-testimonials .pf-test-card { direction: rtl; }
.pf-marquee {
    margin-top: 24px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pf-marquee__track {
    display: flex;
    gap: 22px;
    width: max-content;
    animation: pfMarquee 50s linear infinite;
}
.pf-marquee:hover .pf-marquee__track { animation-play-state: paused; }
@keyframes pfMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-marquee__track { animation: none; }
}

.pf-testimonial {
    flex: 0 0 360px;
    background: #fff;
    padding: 26px 24px;
    border-radius: 18px;
    border: 1.5px solid var(--pf-line);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    margin: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pf-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}
.pf-testimonial__stars {
    display: flex;
    gap: 3px;
    color: #f59e0b;
    margin-bottom: 12px;
}
.pf-testimonial__stars svg { width: 16px; height: 16px; display: block; }
.pf-testimonial__quote {
    font-size: 14.5px;
    color: var(--pf-text);
    line-height: 1.85;
    font-weight: 600;
    margin: 0 0 16px;
}
.pf-testimonial__by {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--pf-line);
}
.pf-testimonial__avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--green));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}
.pf-testimonial__meta { display: flex; flex-direction: column; gap: 2px; }
.pf-testimonial__meta strong { font-size: 14px; color: var(--brand); font-weight: 800; }
.pf-testimonial__meta span   { font-size: 12.5px; color: var(--pf-muted); }

/* ============= CTA — Clean professional design ============= */
.pf-cta-wrap {
    padding: clamp(60px, 8vw, 110px) 0;
    background: var(--pf-bg-page);
    position: relative;
}
.pf-cta {
    position: relative;
    background:
        linear-gradient(135deg, #102a52 0%, #1e3a6f 30%, var(--brand) 60%, #15803d 100%);
    color: #fff;
    text-align: center;
    border-radius: 28px;
    padding: clamp(60px, 8vw, 100px) clamp(32px, 6vw, 80px);
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(255,255,255,0.06) inset;
}
/* Subtle SVG grid pattern overlay — replaces the random dots/sparkles */
.pf-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Two large soft glows — adds depth without clutter */
.pf-cta__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
}
.pf-cta__glow--1 { width: 380px; height: 380px; top: -120px; inset-inline-end: -100px; background: #22c55e; animation: pfCtaDrift 14s ease-in-out infinite; }
.pf-cta__glow--2 { width: 320px; height: 320px; bottom: -100px; inset-inline-start: -80px; background: #338eaa; animation: pfCtaDrift 18s ease-in-out infinite reverse; }
@keyframes pfCtaDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* ──────── Floating geometric shapes ──────── */
.pf-cta__shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
/* Outline rings */
.pf-cta__shape--ring1,
.pf-cta__shape--ring2 {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.18);
}
.pf-cta__shape--ring1 { width: 140px; height: 140px; top: 14%; inset-inline-start: 8%; animation: pfShapeFloat 9s ease-in-out infinite; }
.pf-cta__shape--ring2 { width: 90px;  height: 90px;  bottom: 16%; inset-inline-end: 10%; animation: pfShapeFloat 11s ease-in-out infinite reverse; }

/* Filled circles (small accent dots) */
.pf-cta__shape--circle1,
.pf-cta__shape--circle2 {
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
}
.pf-cta__shape--circle1 { width: 30px; height: 30px; top: 30%; inset-inline-end: 18%; animation: pfShapeFloat 7s ease-in-out infinite; }
.pf-cta__shape--circle2 { width: 18px; height: 18px; bottom: 28%; inset-inline-start: 18%; animation: pfShapeFloat 8s ease-in-out infinite reverse; animation-delay: -3s; }

/* Rotating squares (tilted, abstract) */
.pf-cta__shape--square1,
.pf-cta__shape--square2 {
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
}
.pf-cta__shape--square1 { width: 60px; height: 60px; top: 20%; inset-inline-end: 5%; transform: rotate(15deg); animation: pfShapeSpin 18s linear infinite; }
.pf-cta__shape--square2 { width: 40px; height: 40px; bottom: 22%; inset-inline-start: 7%; transform: rotate(-10deg); animation: pfShapeSpin 22s linear infinite reverse; }

/* Triangle / diamond outlined SVG shapes */
.pf-cta__shape--triangle,
.pf-cta__shape--diamond {
    width: 56px; height: 56px;
}
.pf-cta__shape--triangle { top: 50%; inset-inline-start: 4%; animation: pfShapeFloat 10s ease-in-out infinite, pfShapeSpinSlow 24s linear infinite; }
.pf-cta__shape--diamond  { top: 12%; inset-inline-end: 30%; width: 44px; height: 44px; animation: pfShapeFloat 12s ease-in-out infinite reverse, pfShapeSpinSlow 28s linear infinite reverse; }
.pf-cta__shape--triangle svg,
.pf-cta__shape--diamond svg { width: 100%; height: 100%; display: block; }

@keyframes pfShapeFloat {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(15px, -20px); }
    66%      { transform: translate(-12px, 15px); }
}
@keyframes pfShapeSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes pfShapeSpinSlow {
    from { transform: rotate(0deg) translate(0, 0); }
    50%  { transform: rotate(180deg) translate(8px, -10px); }
    to   { transform: rotate(360deg) translate(0, 0); }
}

/* ──────── Sparkle stars (twinkle effect) ──────── */
.pf-cta__sparkle {
    position: absolute;
    width: 24px; height: 24px;
    color: #fde68a;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 8px rgba(253, 230, 138, 0.6));
    animation: pfSparkleTwinkle 3s ease-in-out infinite;
}
.pf-cta__sparkle svg { width: 100%; height: 100%; display: block; }
.pf-cta__sparkle--1 { top: 18%; inset-inline-start: 22%; }
.pf-cta__sparkle--2 { top: 35%; inset-inline-end: 26%; width: 32px; height: 32px; animation-delay: -1s; color: #fff; }
.pf-cta__sparkle--3 { bottom: 22%; inset-inline-start: 32%; width: 18px; height: 18px; animation-delay: -2s; color: #93c5fd; }
@keyframes pfSparkleTwinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.15) rotate(20deg); }
}

/* ──────── Floating particles (tiny dots) ──────── */
.pf-cta__particle {
    position: absolute;
    width: 4px; height: 4px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    animation: pfParticleRise 6s ease-in infinite;
}
.pf-cta__particle--1 { bottom: 20%; inset-inline-start: 15%; animation-delay: 0s; }
.pf-cta__particle--2 { bottom: 30%; inset-inline-start: 35%; animation-delay: -1s; width: 3px; height: 3px; }
.pf-cta__particle--3 { bottom: 15%; inset-inline-end: 25%; animation-delay: -2s; }
.pf-cta__particle--4 { bottom: 40%; inset-inline-end: 40%; animation-delay: -3s; width: 5px; height: 5px; }
.pf-cta__particle--5 { bottom: 25%; inset-inline-start: 55%; animation-delay: -4s; width: 3px; height: 3px; }
.pf-cta__particle--6 { bottom: 10%; inset-inline-end: 60%; animation-delay: -5s; }
@keyframes pfParticleRise {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(-180px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-cta__shape, .pf-cta__sparkle, .pf-cta__particle, .pf-cta__glow {
        animation: none !important;
    }
    .pf-cta__particle { display: none; }
}

.pf-cta__content { position: relative; z-index: 3; }

/* Live status pill — smooth pulse, single element at the top */
.pf-cta__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 28px;
    color: #fff;
}
.pf-cta__pulse {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: pfPulseDot 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes pfPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.pf-cta__title {
    font-family: 'Tajawal', sans-serif;
    font-size: clamp(30px, 4.6vw, 52px);
    font-weight: 900;
    margin: 0 0 18px;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.5px;
    max-width: 800px;
    margin-inline: auto;
}
.pf-cta__desc {
    font-size: clamp(15px, 1.7vw, 17px);
    color: rgba(255,255,255,0.88);
    line-height: 1.85;
    margin: 0 auto 36px;
    max-width: 620px;
}
.pf-cta__btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

/* Trust signals — three reassurance items with checkmarks */
.pf-cta__trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
    font-weight: 700;
}
.pf-cta__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pf-cta__trust svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}

@media (max-width: 680px) {
    .pf-cta { border-radius: 22px; }
    .pf-cta__btns { flex-direction: column; align-items: stretch; }
    .pf-cta__btns .pf-btn { width: 100%; }
    .pf-cta__trust { flex-direction: column; align-items: center; gap: 10px; }
}

/* ============= RESPONSIVE ============= */
@media (max-width: 980px) {
    .pf-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .pf-hero { padding-block: 70px; }
    .pf-hero__title { font-size: 32px; }
    .pf-hero__ctas { flex-direction: column; align-items: stretch; }
    .pf-hero__ctas .pf-btn { width: 100%; }
    .pf-hero__stats { gap: 6px; padding: 12px 14px; }
    .pf-hero-stat { padding: 0 6px; }
    .pf-hero-stat strong { font-size: 22px; }
    .pf-hero-stat__sep { height: 24px; }

    .pf-numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    .pf-cats__grid { grid-template-columns: 1fr; }

    .pf-featured__wrap { padding: 0 8px; }
    .pf-swiper-nav { display: none; }

    /* Timeline becomes single-column on mobile */
    .pf-timeline__rail,
    .pf-timeline__progress { inset-inline-start: 26px; transform: none; }
    .pf-timeline__item,
    .pf-timeline__item--right {
        width: 100%;
        margin-inline-start: 0;
        padding: 14px 0 14px 60px;
        padding-inline-start: 60px;
        padding-inline-end: 0;
    }
    .pf-timeline__dot,
    .pf-timeline__item--right .pf-timeline__dot {
        inset-inline-start: 0;
        inset-inline-end: auto;
        top: 14px;
    }
    .pf-timeline__card::before {
        inset-inline-start: -9px;
        inset-inline-end: auto;
        border-top: none;
        border-inline-end: none;
    }

    .pf-testimonial { flex-basis: 280px; }

    .pf-cta { border-radius: 22px; padding: 50px 22px; }
    .pf-cta__icon { width: 64px; height: 64px; }
    .pf-cta__icon img { width: 40px; height: 40px; }
    .pf-cta__btns { flex-direction: column; align-items: stretch; }
    .pf-cta__btns .pf-btn { width: 100%; }
}
@media (max-width: 480px) {
    .pf-numbers__grid { grid-template-columns: 1fr; }
    .pf-hero__stats { flex-direction: column; }
    .pf-hero-stat__sep { width: 30px; height: 1px; }
}