/* =============================================================
   single-case-study-propcare.css — SpinesTech
   "PropCare 360" case study — RTL Arabic, premium SaaS layout.
   Tokens: --color-secondary, IBM Plex Sans Arabic.
   ============================================================= */

.pc {
    /* NOTE: this section is a pixel-matched, hardcoded reproduction of the
       Stitch design's own palette (see design tokens: primary #00254d,
       secondary #00668a, tertiary-fixed #96fa76, background #f9f9fe).
       It intentionally does NOT reuse the site-wide --color-secondary
       (green, used elsewhere on the site) because the source design for
       this case study uses a blue secondary, not green — that mismatch
       was the root cause of "الألوان مش متطابقة". */
    --pc-primary:            #00254d;
    --pc-primary-container:  #003b73;
    --pc-secondary:          #00668a;
    --pc-secondary-lt:       #86d2fd;
    --pc-tertiary:           #96fa76;
    --pc-tertiary-dim:       #7bdd5d;
    --pc-tertiary-container: #0c4500;
    --pc-error:              #ba1a1a;
    --pc-error-container:    #ffdad6;
    --pc-ink:          var(--color-on-surface, #1b1c19);
    --pc-ink-soft:     var(--color-on-surface-variant, #44474c);
    --pc-bg:           #f9f9fe;
    --pc-surface:      #ffffff;
    --pc-surface-tint: #f3f3f9;
    --pc-outline:      var(--color-outline-variant, #c4c6cd);
    --pc-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --pc-section-y:    clamp(2.5rem, 4vw, 3.5rem);
    --pc-section-y-sm: clamp(2rem, 3.5vw, 2.75rem);

    position: relative;
    color: var(--pc-ink);
    background: var(--pc-bg);
    overflow-x: clip;
}

.pc__container {
    max-width: var(--container-max, 1280px);
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (min-width: 768px)  { .pc__container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .pc__container { padding-inline: 3rem; } }

/* ── Reveal-on-scroll ─────────────────────────────────────── */
.pc [data-pc-reveal] { opacity: 1; transform: none; }
.pc.js-ready [data-pc-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--pc-ease), transform 0.7s var(--pc-ease);
    will-change: opacity, transform;
}
.pc.js-ready [data-pc-reveal].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ── Image / media reveal ─────────────────────────────────── */
.pc__media-reveal { position: relative; }
.pc.js-ready .pc__media-reveal {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.8s var(--pc-ease), transform 0.8s var(--pc-ease);
    will-change: opacity, transform;
}
.pc.js-ready .pc__media-reveal.is-revealed,
.pc.js-ready [data-pc-reveal].is-visible .pc__media-reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ── Staggered list reveals (numbered / checklist / v2 lists) ── */
.pc.js-ready [data-pc-reveal] .pc__numbered-list li,
.pc.js-ready [data-pc-reveal] .pc__checklist li,
.pc.js-ready [data-pc-reveal] .pc__v2-list li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--pc-ease), transform 0.5s var(--pc-ease);
}
.pc.js-ready [data-pc-reveal].is-visible .pc__numbered-list li,
.pc.js-ready [data-pc-reveal].is-visible .pc__checklist li,
.pc.js-ready [data-pc-reveal].is-visible .pc__v2-list li {
    opacity: 1;
    transform: none;
}
.pc__numbered-list li:nth-child(1), .pc__checklist li:nth-child(1), .pc__v2-list li:nth-child(1) { transition-delay: 0.05s; }
.pc__numbered-list li:nth-child(2), .pc__checklist li:nth-child(2), .pc__v2-list li:nth-child(2) { transition-delay: 0.16s; }
.pc__numbered-list li:nth-child(3), .pc__checklist li:nth-child(3), .pc__v2-list li:nth-child(3) { transition-delay: 0.27s; }

/* ── Animated underline (challenge heading) ──────────────────── */
.pc.js-ready [data-pc-reveal] .pc__underline {
    transform: scaleX(0);
    transition: transform 0.6s var(--pc-ease) 0.25s;
}
.pc.js-ready [data-pc-reveal].is-visible .pc__underline {
    transform: scaleX(1);
}

/* ── Shared type ──────────────────────────────────────────── */
.pc__h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--pc-primary);
    margin-block-end: 0.75rem;
}
.pc__h2--light  { color: #fff; }
.pc__h2--center { text-align: center; }
.pc__p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--pc-ink-soft);
    margin-block-end: 1rem;
}

.pc__underline {
    display: block;
    width: 5rem;
    height: 3px;
    border-radius: 9999px;
    background: var(--pc-secondary-lt);
    margin-inline: auto;
    margin-block-start: 0.65rem;
    transform-origin: center;
}

/* Browser-chrome mockup frame */
.pc__browser {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--pc-surface);
    box-shadow: 0 24px 50px -16px rgba(0, 37, 77, 0.18);
    border: 1px solid rgba(10, 29, 47, 0.06);
    transition: transform 0.4s var(--pc-ease), box-shadow 0.4s var(--pc-ease);
    /* Enlarged so dashboard screenshots read clearly at desktop size */
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}
@media (min-width: 1024px) { .pc__browser { max-width: 860px; } }

/* Full-bleed showcase figures (top/bottom dashboard shots) fill the container */
.pc__browser--wide { max-width: 100%; }

.pc__browser:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 56px -16px rgba(0, 37, 77, 0.22);
}

/* Subtle shimmer sweep on hover for a premium feel */
.pc__browser::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.4) 50%, transparent 58%);
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 2;
}
.pc__browser:hover::before {
    animation: pc-shimmer-sweep 1.05s var(--pc-ease);
}
@keyframes pc-shimmer-sweep {
    to { transform: translateX(130%); }
}

.pc__browser-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(180deg, var(--pc-surface-tint), #ffffff 130%);
    border-bottom: 1px solid rgba(10, 29, 47, 0.06);
}
/* Decorative fake address pill — purely visual, no markup change needed */
.pc__browser-chrome::after {
    content: '';
    flex: 1;
    max-width: 55%;
    height: 0.8rem;
    margin-inline-start: 0.65rem;
    border-radius: 9999px;
    background: rgba(10, 29, 47, 0.07);
}
.pc__browser-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pc__browser-dot--red  { background: #ff5f56; }
.pc__browser-dot--gold { background: #ffbd2e; }
.pc__browser-dot--green{ background: #27c93f; }

.pc__browser img {
    width: 100%;
    height: auto;
    display: block;
    /* contain (not cover): guarantees the whole screenshot is always
       visible — never cropped — even if the real asset's aspect ratio
       doesn't exactly match the width/height attributes in the markup. */
    object-fit: contain;
    object-position: top center;
    background: var(--pc-surface-tint);
    /* image-rendering hints removed — they were forcing pixel-art style
       aliasing on photographic screenshots and degrading their quality
       when scaled. Default smooth scaling looks correct here. */
}

/* =============================================================
   01 · HERO
   ============================================================= */
.pc__hero {
    position: relative;
    overflow: hidden;
    /* Modest, comfortable top spacing — the navbar sits in normal
       document flow above the hero (not fixed/overlapping it), so this
       doesn't need to reserve large "clearance" space, just a normal
       section gap that scales gently with viewport width. */
    padding-block: clamp(13rem, 1rem + 2vw, 4rem) clamp(2.90rem, 8vw, 5.5rem);
}

.pc__hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.35;
    will-change: transform;
}
.pc__hero-glow--1 {
    /* Disabled: the near-black --pc-primary tint, blurred at 35% opacity,
       rendered as a visible dark patch near the top corner in RTL layouts.
       Hidden here (rather than removing the markup) so it stays easy to
       re-enable/re-color later without touching the PHP template. */
    display: none;
}
.pc__hero-glow--2 {
    width: min(360px, 60vw);
    height: min(360px, 60vw);
    background: var(--pc-secondary);
    bottom: 8%;
    inset-inline-end: 0;
    animation: pc-glow-b 18s ease-in-out infinite;
}
@keyframes pc-glow-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(16px, -18px); }
}
@keyframes pc-glow-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, 14px); }
}

.pc__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.25rem);
    align-items: center;
}
@media (min-width: 1024px) {
    .pc__hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; }
    /* Stitch design: text column on the left, visual (browser+phone) on
       the right. DOM order is text-first/visual-second, and in an RTL
       grid that placed text on the RIGHT by default — the opposite of
       the design. `order` flips the rendered position without touching
       markup or breaking the mobile (stacked) order below. */
    .pc__hero-content { order: 2; }
    .pc__hero-visual  { order: 1; }
}

.pc__hero-content { text-align: start; }

.pc__badge {
    position: relative;
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
    background: rgba(0, 102, 138, 0.12);
    color: var(--pc-secondary);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
    margin-block-end: 0.85rem;
}
.pc__badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: pc-badge-pulse 2.8s ease-out infinite;
}
@keyframes pc-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 102, 138, 0.32); }
    70%  { box-shadow: 0 0 0 9px rgba(0, 102, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 138, 0); }
}

.pc__hero-title {
    font-size: clamp(1.85rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--pc-primary);
    margin-block-end: 1rem;
}

.pc__hero-copy {
    font-size: clamp(1rem, 1.4vw, 1.08rem);
    line-height: 1.75;
    color: var(--pc-ink-soft);
    max-width: 36rem;
}

.pc__hero-visual {
    /* --pc-bleed is the single source of truth for how far the phone
       mockup and floating badges are allowed to overlap past the visual
       column's own edge. It scales fluidly with viewport width (via vw)
       but is clamped at both ends, so the overlap effect is preserved on
       every screen without ever being able to reach past the outer page
       padding — which is what was causing badges to get clipped on
       narrower desktop/laptop widths. */
    --pc-bleed: clamp(0.5rem, 1.6vw, 1.75rem);
    position: relative;
    padding-block-end: clamp(2.75rem, 7vw, 5rem);
    /* Reserves room on the bleed side inside the visual column itself,
       so the phone/badges overlap into this reserved space first before
       ever touching the column's real boundary. */
    padding-inline: var(--pc-bleed);
}

.pc__hero-frame { position: relative; }

.pc__hero-phone {
    position: absolute;
    bottom: clamp(-3.5rem, -6vw, -2.25rem);
    inset-inline-start: calc(var(--pc-bleed) * -1);
    width: clamp(150px, 20vw, 220px);
    z-index: 20;
    border-radius: 1.75rem;
    border: 6px solid var(--pc-primary);
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 37, 77, 0.28);
    aspect-ratio: 9 / 19.5;
    background: #fff;
    animation: pc-phone-float 6.5s ease-in-out infinite;
    will-change: transform;
}
.pc__hero-phone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    background: #fff;
    display: block;
}
@keyframes pc-phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pc__float {
    position: absolute;
    z-index: 30;
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 16px 32px -12px rgba(0, 37, 77, 0.14);
    border-inline-end: 3px solid var(--pc-secondary);
    font-weight: 700;
    color: var(--pc-primary);
    font-size: clamp(0.72rem, 0.9vw, 0.8rem);
    white-space: nowrap;
    will-change: transform;
}
@media (min-width: 1024px) { .pc__float { display: flex; } }

.pc__float--1 {
    top: 6%;
    inset-inline-end: calc(var(--pc-bleed) * -0.7);
    animation: pc-bounce 3.2s ease-in-out infinite;
}
.pc__float--2 {
    top: 40%;
    inset-inline-start: calc(var(--pc-bleed) * -1);
    border-inline-end-color: var(--pc-error);
    animation: pc-bounce 4s ease-in-out infinite;
    animation-delay: -1s;
}
.pc__float--3 {
    bottom: calc(var(--pc-bleed) * -0.45);
    inset-inline-end: 20%;
    border-inline-end-color: var(--pc-tertiary);
    animation: pc-pulse-soft 2.8s ease-in-out infinite;
}

@keyframes pc-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pc-pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.88; transform: scale(1.025); }
}

.pc__float-icon--secondary { color: var(--pc-secondary); }
.pc__float-icon--error     { color: var(--pc-error); }
.pc__float-icon--tertiary  { color: var(--pc-tertiary-dim); }

@media (max-width: 767px) {
    .pc__hero-frame {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .pc__hero-phone {
        position: static;
        width: clamp(150px, 55vw, 220px);
        margin-inline: auto;
        border-width: 5px;
        border-radius: 1.4rem;
    }
    .pc__hero-visual { padding-block-end: 0; }
    .pc__hero-content { text-align: center; }
    .pc__hero-copy { margin-inline: auto; }
}

/* =============================================================
   02 · التحديات (Before/After)
   ============================================================= */
.pc__challenge {
    padding-block: var(--pc-section-y);
    background: var(--pc-primary);
    color: #fff;
}
.pc__challenge-head { text-align: center; margin-block-end: clamp(1.75rem, 3vw, 2.5rem); }

.pc__challenge-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
@media (min-width: 1024px) {
    .pc__challenge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}

.pc__before {
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pc__before-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pc-error-container);
    margin-block-end: 1.25rem;
}

.pc__after {
    padding: clamp(1.35rem, 2.5vw, 1.85rem);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s var(--pc-ease), box-shadow 0.35s var(--pc-ease);
}
.pc__after:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.24);
}
.pc__after-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pc-primary);
    margin-block-end: 1.25rem;
}
.pc__after-title .material-symbols-outlined { color: var(--pc-secondary); }

.pc__numbered-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pc__numbered-list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.pc__numbered-list p {
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

.pc__before .pc__numbered-list p { color: rgba(255, 255, 255, 0.72); }
.pc__after  .pc__numbered-list p { color: var(--pc-ink-soft); font-weight: 600; }

.pc__num { font-size: 1.25rem; font-weight: 800; flex-shrink: 0; line-height: 1.2; }
.pc__num--error     { color: var(--pc-error); }
.pc__num--secondary { color: var(--pc-secondary); }

/* =============================================================
   03 · لوحة تحكم الإدارة
   ============================================================= */
.pc__dashboard {
    padding-block: var(--pc-section-y);
    background: var(--pc-surface-tint);
    overflow: hidden;
}
.pc__dashboard-head { text-align: center; margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem); }
.pc__dashboard-sub {
    color: var(--pc-ink-soft);
    max-width: 38rem;
    margin-inline: auto;
    font-size: 1.02rem;
    line-height: 1.65;
}

.pc__showcase-block {
    margin-block-end: clamp(2rem, 4vw, 3rem);
}
.pc__showcase-block:last-child { margin-block-end: 0; }

.pc__showcase-caption { margin-block-start: 1rem; }
.pc__showcase-caption--center {
    text-align: center;
    max-width: 36rem;
    margin-inline: auto;
    margin-block-start: 1rem;
}
.pc__showcase-caption h3,
.pc__showcase-caption h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pc-primary);
    margin-block-end: 0.3rem;
}
.pc__showcase-caption p {
    color: var(--pc-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.pc__showcase-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-block-end: clamp(2rem, 4vw, 3rem);
    align-items: start;
}
@media (min-width: 900px) {
    .pc__showcase-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}
.pc__showcase-2col .pc__showcase-block { margin-block-end: 0; }
.pc__showcase-2col .pc__browser { max-width: 100%; }

/* =============================================================
   04 · Feature Spotlights
   ============================================================= */
.pc__spotlights { padding-block: var(--pc-section-y); }
.pc__spotlights-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.pc__spotlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 1024px) {
    .pc__spotlight {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
    .pc__spotlight--reverse { flex-direction: row-reverse; }
}

.pc__spotlight-text { flex: 1; min-width: 0; width: 100%; }

.pc__pill {
    display: inline-block;
    padding: 0.28rem 0.9rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-block-end: 0.85rem;
}
.pc__pill--secondary { background: rgba(0, 102, 138, 0.1); color: var(--pc-secondary); }
.pc__pill--primary   { background: rgba(0, 37, 77, 0.08); color: var(--pc-primary); }
.pc__pill--tertiary  { background: rgba(150, 250, 118, 0.16); color: var(--pc-tertiary-container); }

.pc__checklist {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-block-start: 1.1rem;
}
.pc__checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--pc-ink);
    font-size: 0.95rem;
}
.pc__checklist .material-symbols-outlined {
    color: var(--pc-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
}
/* Per-spotlight accent: matches each row's pill color exactly, as in the
   Stitch design (spotlight 1 = secondary/blue, 2 = primary/navy, 3 = tertiary/green) */
.pc__spotlight:has(.pc__spotlight-visual--primary) .pc__checklist .material-symbols-outlined {
    color: var(--pc-primary);
}
.pc__spotlight:has(.pc__spotlight-visual--tertiary) .pc__checklist .material-symbols-outlined {
    color: var(--pc-tertiary-container);
}

.pc__spotlight-visual {
    flex: 0 1 auto;
    position: relative;
    width: 100%;
    max-width: 13rem;
    min-width: 0;
}
/* Professional phone-bezel frame. No fixed aspect-ratio is forced on this
   wrapper — its height follows the image's own natural height — so the
   screenshot inside always renders at full size with nothing cropped off. */
.pc__spotlight-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 7px solid var(--pc-primary);
    border-radius: 1.75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 48px rgba(10, 29, 47, 0.16);
    transition: transform 0.4s var(--pc-ease);
}
.pc__spotlight-visual:hover .pc__spotlight-frame { transform: translateY(-5px); }
.pc__spotlight-frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #fff;
}
.pc__spotlight-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    transform: rotate(-3deg) scale(1.04);
    pointer-events: none;
    z-index: 0;
}
.pc__spotlight-visual--secondary::before { background: rgba(0, 102, 138, 0.1); }
.pc__spotlight-visual--primary::before   { background: rgba(0, 37, 77, 0.08); transform: rotate(3deg) scale(1.04); }
.pc__spotlight-visual--tertiary::before  { background: rgba(150, 250, 118, 0.14); }

@media (max-width: 1023px) {
    .pc__spotlight-text { text-align: center; }
    .pc__checklist { align-items: center; }
    .pc__checklist li { justify-content: center; }
}

/* =============================================================
   05 · رحلة العميل الرقمية
   ============================================================= */
.pc__journey {
    padding-block: var(--pc-section-y);
    background: var(--pc-surface);
}
.pc__journey-head { text-align: center; margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem); }
.pc__journey-sub {
    color: var(--pc-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 34rem;
    margin-inline: auto;
}

.pc__journey-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.75rem, 3vw, 2.25rem);
}
.pc__journey-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 240px;
}
@media (min-width: 640px) {
    .pc__journey-item {
        /* Distribute 4 items on the first row, 3 on the second row */
        width: calc(25% - 2.25rem);
        min-width: 160px;
    }
    .pc__journey-item--offset { margin-block-start: 1.75rem; }
}
@media (min-width: 1024px) {
    .pc__journey-grid {
        gap: 2rem 1.5rem;
    }
    .pc__journey-item {
        width: calc(25% - 1.5rem);
    }
}

.pc__mini-frame {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 9 / 19.5;
    border-radius: 1.75rem;
    border: 6px solid var(--pc-primary);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(10, 29, 47, 0.15);
    margin-block-end: 0.9rem;
    background: #fff;
    transition: transform 0.35s var(--pc-ease), box-shadow 0.35s var(--pc-ease);
}
.pc__journey-item:hover .pc__mini-frame {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(10, 29, 47, 0.2);
}
.pc__mini-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    background: #fff;
    display: block;
}

.pc__journey-item h3 {
    font-weight: 700;
    color: var(--pc-primary);
    font-size: 0.98rem;
    margin-block-end: 0.2rem;
    line-height: 1.35;
}
.pc__journey-item p {
    font-size: 0.82rem;
    color: var(--pc-ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* =============================================================
   06 · تطبيق الفنيين (V2)
   ============================================================= */
.pc__v2 {
    position: relative;
    overflow: hidden;
    padding-block: var(--pc-section-y);
    background: var(--pc-secondary);
    color: #fff;
}
.pc__v2-skew {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 50%;
    height: 100%;
    background: rgba(10, 29, 47, 0.12);
    transform: skewX(-12deg) translateX(4rem);
    pointer-events: none;
}
[dir="rtl"] .pc__v2-skew { transform: skewX(12deg) translateX(-4rem); }

.pc__v2-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 768px) {
    .pc__v2-inner {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
}

.pc__v2-text { flex: 1; min-width: 0; width: 100%; }
.pc__v2-badge {
    display: inline-block;
    padding: 0.28rem 0.9rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-block-end: 1rem;
}
.pc__v2-copy {
    font-size: 1.02rem;
    line-height: 1.7;
    opacity: 0.88;
    margin-block: 0.85rem 1.5rem;
}
.pc__v2-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.pc__v2-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.pc__v2-list .material-symbols-outlined {
    color: var(--pc-tertiary);
    flex-shrink: 0;
    margin-block-start: 0.1rem;
}

.pc__v2-visual {
    flex: 0 1 auto;
    position: relative;
    width: 100%;
    min-width: 0;
    /* Widened from 26rem: this now holds a landscape dashboard screenshot
       (admin-dashboard-service-chart.png) instead of a portrait phone
       mockup, so it needs more horizontal room to read clearly. */
    max-width: 34rem;
    margin-inline: auto;
}
.pc__v2-phone {
    border-radius: 1.5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
.pc__v2-phone img,
.pc__v2-visual > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

.pc__v2-tag {
    position: absolute;
    bottom: -1rem;
    inset-inline-start: -1rem;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background: var(--pc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    animation: pc-tag-pulse 2.6s ease-in-out infinite;
}
.pc__v2-tag span {
    color: #fff;
    font-weight: 800;
    text-align: center;
    line-height: 1.25;
    font-size: 0.82rem;
}
@keyframes pc-tag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 29, 47, 0.35), 0 16px 32px rgba(0, 0, 0, 0.3); }
    50%      { box-shadow: 0 0 0 12px rgba(10, 29, 47, 0), 0 16px 32px rgba(0, 0, 0, 0.3); }
}

/* =============================================================
   07 · CTA
   ============================================================= */
.pc__cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 6vw, 5rem);
    background: var(--pc-primary);
    color: #fff;
    text-align: center;
}
.pc__cta-bg {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: radial-gradient(circle at 2px 2px, #ffffff 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}
.pc__cta-inner {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    margin-inline: auto;
}

.pc__cta-heading {
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.3;
    margin-block-end: 1.1rem;
}
.pc__cta-copy {
    font-size: 1.02rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-block-end: 1.5rem;
}
.pc__cta-eyebrow {
    display: block;
    color: var(--pc-secondary);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    margin-block-end: 1.75rem;
}

.pc__cta-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
}
@media (min-width: 640px) {
    .pc__cta-ctas {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

.pc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.75rem;
    border-radius: 0.8rem;
    font-weight: 800;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.25s var(--pc-ease), box-shadow 0.25s var(--pc-ease), background-color 0.25s ease;
}
.pc__btn--secondary {
    background: var(--pc-secondary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 102, 138, 0.35);
}
.pc__btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 102, 138, 0.45);
}
.pc__btn--outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.pc__btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

.pc__btn:focus-visible {
    outline: 2px solid var(--pc-secondary-lt);
    outline-offset: 3px;
}

/* =============================================================
   RESPONSIVE TUNING
   ============================================================= */
@media (max-width: 640px) {
    .pc__hero { padding-block-end: 3.25rem; }
    .pc__hero-title { font-size: 1.7rem; }

    .pc__challenge,
    .pc__dashboard,
    .pc__spotlights,
    .pc__journey,
    .pc__v2,
    .pc__cta { padding-block: var(--pc-section-y-sm); }

    .pc__v2-tag {
        width: 5.5rem;
        height: 5.5rem;
        bottom: -0.75rem;
        inset-inline-start: -0.75rem;
    }
    .pc__v2-tag span { font-size: 0.72rem; }

    .pc__mini-frame {
        max-width: 170px;
        border-width: 5px;
        border-radius: 1.4rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .pc__spotlight-visual { max-width: 14rem; }
}

@media (min-width: 1280px) {
    .pc__spotlight-visual { max-width: 16rem; }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .pc.js-ready [data-pc-reveal],
    .pc.js-ready .pc__media-reveal,
    .pc.js-ready [data-pc-reveal] .pc__numbered-list li,
    .pc.js-ready [data-pc-reveal] .pc__checklist li,
    .pc.js-ready [data-pc-reveal] .pc__v2-list li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .pc.js-ready [data-pc-reveal] .pc__underline {
        transform: none !important;
        transition: none !important;
    }

    .pc__hero-glow--1,
    .pc__hero-glow--2,
    .pc__hero-phone,
    .pc__float--1,
    .pc__float--2,
    .pc__float--3,
    .pc__v2-tag,
    .pc__badge::after {
        animation: none !important;
    }

    .pc__browser::before {
        content: none;
    }

    .pc__browser:hover,
    .pc__after:hover,
    .pc__spotlight-visual:hover img,
    .pc__journey-item:hover .pc__mini-frame,
    .pc__btn--secondary:hover {
        transform: none;
    }
}