body {
    --sidebar-width: clamp(220px, 21vw, 280px);
    --sidebar-width-narrow: clamp(210px, 20vw, 250px);
    --sidebar-width-compact: 200px;
    --identity-accent: #6ea8d9;
    --identity-accent-deep: #3f78b0;
    --identity-accent-soft: rgba(110, 168, 217, 0.16);
}

body {
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    background-image:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.11), transparent 18%),
        radial-gradient(circle at bottom left, rgba(110, 168, 217, 0.1), transparent 20%),
        radial-gradient(circle at 12% 10%, rgba(216, 167, 60, 0.09) 0 10px, transparent 11px),
        radial-gradient(circle at 18% 16%, rgba(22, 166, 160, 0.06) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 12%, rgba(216, 167, 60, 0.09) 0 10px, transparent 11px),
        radial-gradient(circle at 82% 18%, rgba(22, 166, 160, 0.06) 0 10px, transparent 11px),
        radial-gradient(circle at 10% 86%, rgba(216, 167, 60, 0.08) 0 10px, transparent 11px),
        radial-gradient(circle at 16% 80%, rgba(22, 166, 160, 0.06) 0 10px, transparent 11px),
        radial-gradient(circle at 90% 88%, rgba(216, 167, 60, 0.08) 0 10px, transparent 11px),
        radial-gradient(circle at 84% 82%, rgba(22, 166, 160, 0.06) 0 10px, transparent 11px),
        linear-gradient(135deg, transparent 0 46%, rgba(22, 166, 160, 0.04) 46% 47%, transparent 47% 53%, rgba(22, 166, 160, 0.04) 53% 54%, transparent 54%),
        linear-gradient(-135deg, transparent 0 46%, rgba(216, 167, 60, 0.035) 46% 47%, transparent 47% 53%, rgba(216, 167, 60, 0.035) 53% 54%, transparent 54%),
        linear-gradient(180deg, #f9fcfb 0%, #eef6f5 100%);
    background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, 320px 320px, 320px 320px, auto;
    background-attachment: fixed;
    font-family: 'Cairo', sans-serif;
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    overflow-x: hidden;
}

.content-shell {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - var(--sidebar-width));
    min-width: 0;
    margin-right: var(--sidebar-width);
    transition: margin-right 0.3s;
}

.main-wrapper {
    display: flex;
    padding-top: 78px;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

main {
    padding: 32px;
    flex: 1;
}

.scroll-welcome-target {
    opacity: 0;
    transform: translateY(28px) scale(0.99);
    filter: blur(5px);
    transition:
        opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

.scroll-welcome-target.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.topbar-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(420px, 100%);
    margin: 0 auto 24px;
    padding: 20px 26px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.1), transparent 34%),
        radial-gradient(circle at bottom left, rgba(110, 168, 217, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 249, 0.96));
    border: 1px solid rgba(22, 166, 160, 0.16);
    box-shadow: 0 16px 28px rgba(13, 127, 122, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
}

.topbar-banner::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    border: 1px dashed rgba(22, 166, 160, 0.24);
    pointer-events: none;
}

.topbar-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 24%, rgba(22, 166, 160, 0.08) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 24%, rgba(22, 166, 160, 0.08) 0 10px, transparent 11px),
        radial-gradient(circle at 12% 76%, rgba(22, 166, 160, 0.08) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 76%, rgba(22, 166, 160, 0.08) 0 10px, transparent 11px);
    pointer-events: none;
}

.topbar-banner-image {
    position: relative;
    z-index: 1;
    display: block;
    width: min(240px, 100%);
    height: auto;
    object-fit: contain;
}

.hero-inline-banner {
    position: relative;
    margin: 0 auto 24px;
    border-radius: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 34%),
        radial-gradient(circle at bottom right, rgba(110, 168, 217, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 247, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 30px 52px rgba(13, 127, 122, 0.09),
        0 12px 24px rgba(110, 168, 217, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -18px 32px rgba(22, 166, 160, 0.05);
    backdrop-filter: blur(18px);
}

.hero-inline-banner::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 28px;
    border: 1px solid rgba(22, 166, 160, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(212, 248, 245, 0.88),
        inset 0 0 0 1px rgba(22, 166, 160, 0.2),
        0 0 0 1px rgba(22, 166, 160, 0.14);
    pointer-events: none;
    z-index: 2;
}

.hero-inline-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(22, 166, 160, 0.46), rgba(110, 168, 217, 0.34) 45%, rgba(255, 255, 255, 0.12) 78%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 76%, rgba(13, 127, 122, 0.12)),
        radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.34), transparent 20%),
        radial-gradient(circle at 82% 74%, rgba(110, 168, 217, 0.24), transparent 30%);
    border-top: 1px solid rgba(22, 166, 160, 0.28);
    pointer-events: none;
    z-index: 3;
}

.hero-inline-banner-image {
    position: relative;
    z-index: 1;
    display: block;
    width: min(1120px, 100%);
    height: 245px;
    margin: 0 auto;
    object-fit: cover;
    opacity: 0.36;
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.tweet-gallery-shell {
    position: relative;
    margin-top: 28px;
    margin-bottom: 28px;
    padding: 32px;
    border-radius: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(22, 166, 160, 0.16), transparent 22%),
        radial-gradient(circle at bottom right, rgba(110, 168, 217, 0.16), transparent 28%),
        radial-gradient(circle at 18% 82%, rgba(216, 167, 60, 0.1), transparent 22%),
        linear-gradient(145deg, #fdfffe 0%, #f2fbf9 50%, #e8f4f7 100%);
    border: 1px solid rgba(22, 166, 160, 0.14);
    box-shadow:
        0 26px 52px rgba(13, 127, 122, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.tweet-gallery-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 28px;
    border: 1px dashed rgba(22, 166, 160, 0.16);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.28), transparent 14%),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.24), transparent 14%);
    pointer-events: none;
}

.tweet-gallery-head,
.tweet-gallery-grid {
    position: relative;
    z-index: 1;
}

.tweet-gallery-head {
    margin-bottom: 22px;
    text-align: center;
}

.tweet-gallery-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(22, 166, 160, 0.1);
    color: #0d7f7a;
    font-size: 0.88rem;
    font-weight: 800;
}

.tweet-gallery-title {
    margin: 14px 0 8px;
    color: #114f62;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.35;
}

.tweet-gallery-subtitle {
    margin: 0 auto;
    max-width: 760px;
    color: #4a706d;
    font-size: 0.97rem;
    line-height: 1.9;
}

.tweet-gallery-marquee {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
    direction: ltr;
}

.tweet-gallery-track {
    display: flex;
    gap: 16px;
    width: max-content;
    direction: ltr;
    animation: tweet-gallery-scroll 20s linear infinite;
    will-change: transform;
}

.tweet-gallery-shell:hover .tweet-gallery-track,
.tweet-gallery-shell:focus-within .tweet-gallery-track {
    animation-play-state: paused;
}

.tweet-gallery-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
}

.tweet-card {
    position: relative;
    flex: 0 0 335px;
    min-height: auto;
    padding: 8px;
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 248, 0.98));
    border: 1px solid rgba(22, 166, 160, 0.18);
    box-shadow:
        0 16px 30px rgba(13, 127, 122, 0.1),
        0 8px 16px rgba(110, 168, 217, 0.06);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.tweet-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    pointer-events: none;
}

.tweet-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #16a6a0, #6ea8d9, #d8a73c);
    opacity: 0.9;
    pointer-events: none;
}

.tweet-card:hover {
    transform: translateY(-6px);
    border-color: rgba(22, 166, 160, 0.35);
    box-shadow:
        0 22px 36px rgba(13, 127, 122, 0.14),
        0 10px 20px rgba(110, 168, 217, 0.08);
}

.tweet-card-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-height: 100%;
    padding: 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.98), transparent 28%),
        linear-gradient(180deg, rgba(251, 254, 253, 0.99), rgba(236, 248, 246, 0.96));
    border: none;
    color: #244c49;
    text-align: center;
    overflow: hidden;
}

.tweet-card-frame::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 88px;
    height: 88px;
    border-radius: 0 24px 0 0;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.1), rgba(110, 168, 217, 0.06));
    pointer-events: none;
}

.tweet-card-frame::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(216, 167, 60, 0.28);
    background: rgba(216, 167, 60, 0.08);
    pointer-events: none;
}

.tweet-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    height: auto;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
    box-shadow:
        0 14px 24px rgba(13, 127, 122, 0.1),
        0 6px 14px rgba(0, 0, 0, 0.04);
    transform: none;
}

.tweet-card-title {
    position: static;
    z-index: 2;
    width: auto;
    padding: 10px 12px;
    transform: none;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 251, 0.94));
    color: #7a1f3d;
    font-family: "Cairo", sans-serif;
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-wrap: balance;
    box-shadow:
        0 10px 18px rgba(13, 127, 122, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tweet-card-title::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #16a6a0, #d8a73c);
}

.tweet-card-title-compact {
    font-size: 0.67rem;
    line-height: 1.3;
}


.app-showcase-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: 28px;
    align-items: center;
    margin-top: 28px;
    margin-bottom: 28px;
    min-height: 470px;
    padding: 30px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 166, 0, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(22, 166, 160, 0.16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f8fcfc 48%, #eaf7f6 100%);
    border: 1px solid rgba(22, 166, 160, 0.18);
    box-shadow: 0 24px 60px rgba(13, 127, 122, 0.12);
}

.app-showcase-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    border: 1px dashed rgba(22, 166, 160, 0.18);
    pointer-events: none;
}

.app-showcase-copy,
.app-showcase-device-stage,
.app-showcase-sponsor {
    position: relative;
    z-index: 1;
}

.app-showcase-sponsor {
    position: absolute;
    top: 226px;
    left: clamp(390px, 41vw, 600px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(295px, 23vw);
    text-align: center;
}

.app-showcase-sponsor-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(242, 140, 0, 0.14), rgba(255, 209, 147, 0.34));
    color: #c77703;
    font-size: 0.92rem;
    font-weight: 900;
    box-shadow: 0 10px 18px rgba(229, 141, 18, 0.12);
}

.app-showcase-sponsor-card {
    width: 100%;
    padding: 20px 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 248, 242, 0.96));
    border: 1px solid rgba(229, 190, 132, 0.42);
    box-shadow:
        0 18px 34px rgba(187, 138, 65, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app-showcase-sponsor-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.app-showcase-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(205, 241, 239, 0.98), rgba(232, 248, 247, 0.96));
    color: #086b67;
    font-size: 0.98rem;
    font-weight: 900;
    border: 1px solid rgba(22, 166, 160, 0.18);
    box-shadow: 0 10px 20px rgba(22, 166, 160, 0.14);
}

.app-showcase-title {
    margin: 14px 0 12px;
    color: #db8000;
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    line-height: 1.65;
    font-weight: 900;
}

.app-showcase-steps {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.app-showcase-step-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: min(100%, 490px);
    padding: 10px 12px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 251, 250, 0.92));
    border: 1px solid rgba(22, 166, 160, 0.22);
    box-shadow:
        0 14px 28px rgba(13, 127, 122, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.app-showcase-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #12a7a0, #0f8e89);
    color: #ffffff;
    font-size: 1.7rem;
    font-weight: 900;
    box-shadow: 0 14px 24px rgba(18, 167, 160, 0.22);
}

.app-showcase-step-text {
    margin: 0;
    color: #2e5fae;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 900;
    line-height: 1.6;
}

.app-showcase-store-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.app-showcase-store-link {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    min-height: 255px;
    min-width: 0;
    padding: 22px 22px 24px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(104, 221, 214, 0.16), transparent 24%),
        radial-gradient(circle at bottom right, rgba(22, 166, 160, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 249, 0.96));
    border: 1px solid rgba(136, 219, 214, 0.5);
    box-shadow:
        0 22px 42px rgba(13, 127, 122, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.app-showcase-store-link::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px dashed rgba(136, 219, 214, 0.34);
    pointer-events: none;
}

.app-showcase-store-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.app-showcase-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 11px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f1720, #243241);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 24px rgba(10, 28, 39, 0.18);
}

.app-showcase-store-badge i {
    font-size: 1.24rem;
}

.app-showcase-store-platform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.14), rgba(205, 241, 239, 0.84));
    color: #0d7f7a;
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}

.app-showcase-store-link:hover {
    transform: translateY(-3px);
    border-color: rgba(22, 166, 160, 0.28);
    box-shadow: 0 26px 42px rgba(13, 127, 122, 0.12);
}

.app-showcase-store-link img {
    display: block;
    width: min(100%, 180px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 16px 26px rgba(13, 127, 122, 0.08),
        inset 0 0 0 1px rgba(196, 230, 228, 0.7);
    position: relative;
    z-index: 1;
}

.app-showcase-device-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 6px 0;
}

.iphone-mockup {
    position: relative;
    width: min(100%, 286px);
    padding: 12px;
    border-radius: 58px;
    background:
        linear-gradient(180deg, #444d5a 0%, #0f141b 48%, #4c5561 100%);
    box-shadow:
        0 32px 60px rgba(10, 28, 39, 0.24),
        inset 0 2px 0 rgba(255, 255, 255, 0.18),
        inset 0 -4px 12px rgba(0, 0, 0, 0.34);
}

.iphone-mockup::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.iphone-mockup-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1290 / 2796;
    border-radius: 40px;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.18);
}

.iphone-mockup-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iphone-mockup-speaker {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 98px;
    height: 28px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(19, 23, 30, 0.98), rgba(38, 43, 50, 0.95));
    transform: translateX(-50%);
    z-index: 2;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.iphone-mockup-side-button,
.iphone-mockup-power-button {
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(180deg, #66707d, #1f2630);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.iphone-mockup-side-button {
    left: -4px;
    width: 4px;
}

.iphone-mockup-side-button-top {
    top: 98px;
    height: 26px;
}

.iphone-mockup-side-button-middle {
    top: 144px;
    height: 54px;
}

.iphone-mockup-side-button-bottom {
    top: 212px;
    height: 54px;
}

.iphone-mockup-power-button {
    right: -4px;
    top: 148px;
    width: 4px;
    height: 78px;
}

@keyframes tweet-gallery-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 8px));
    }
}

.hero-shell {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 36px;
    background:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(13, 127, 122, 0.12), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f2fbfa 52%, #e4f4f2 100%);
    border: 1px solid rgba(22, 166, 160, 0.18);
    box-shadow: 0 24px 60px rgba(13, 127, 122, 0.12);
}

.stats-shell {
    position: relative;
    margin-top: 28px;
    padding: 34px;
    border-radius: 34px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(110, 168, 217, 0.14), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f2fbfa 52%, #e6f3f8 100%);
    border: 1px solid rgba(22, 166, 160, 0.16);
    box-shadow: 0 24px 52px rgba(13, 127, 122, 0.1);
}

.success-partners-shell {
    position: relative;
    margin-top: 28px;
    padding: 30px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(110, 168, 217, 0.12), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f6fbfb 54%, #edf7f9 100%);
    border: 1px solid rgba(22, 166, 160, 0.14);
    box-shadow: 0 22px 46px rgba(13, 127, 122, 0.08);
}

.success-partners-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    border: 1px dashed rgba(22, 166, 160, 0.16);
    pointer-events: none;
}

.success-partners-head,
.success-partners-grid {
    position: relative;
    z-index: 1;
}

.success-partners-head {
    margin-bottom: 20px;
    text-align: center;
}

.success-partners-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(22, 166, 160, 0.1);
    color: #0d7f7a;
    font-size: 0.88rem;
    font-weight: 800;
}

.success-partners-title {
    margin: 14px 0 0;
    color: #114f62;
    font-size: clamp(1.35rem, 1.9vw, 1.95rem);
    line-height: 1.35;
}

.success-partners-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.success-partner-card {
    --partner-tint: 39, 113, 166;
    --partner-base-top: 252, 254, 255;
    --partner-base-bottom: 236, 244, 250;
    --partner-border: 39, 113, 166;
    position: relative;
    min-height: 192px;
    padding: 14px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(var(--partner-tint), 0.14), transparent 34%),
        linear-gradient(180deg, rgba(var(--partner-base-top), 0.96), rgba(var(--partner-base-bottom), 0.96));
    border: 1px solid rgba(var(--partner-border), 0.22);
    box-shadow:
        0 22px 34px rgba(39, 113, 166, 0.08),
        0 10px 24px rgba(var(--partner-tint), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.success-partner-card:hover {
    transform: translateY(-4px);
    border-color: rgba(39, 113, 166, 0.26);
    box-shadow:
        0 20px 30px rgba(39, 113, 166, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.success-partner-mark {
    display: grid;
    place-items: center;
    min-height: 130px;
    padding: 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--partner-tint), 0.16), rgba(var(--partner-base-top), 0.92) 34%, rgba(var(--partner-base-bottom), 0.97) 68%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(var(--partner-base-bottom), 0.97));
    border: 1px dashed rgba(var(--partner-border), 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 0 28px rgba(var(--partner-tint), 0.1);
}


.success-partner-logo {
    display: block;
    width: 100%;
    max-width: 178px;
    max-height: 100px;
    object-fit: contain;
    border-radius: 20px;
    transform: scale(1.06);
    filter: drop-shadow(0 14px 22px rgba(12, 75, 84, 0.16));
}

.success-partner-name {
    margin: 14px 0 0;
    color: #295d5a;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.75;
    text-align: center;
}

.site-footer {
    position: relative;
    margin: 28px 32px 32px;
    padding: 28px 30px 18px;
    border-radius: 30px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(22, 166, 160, 0.12), transparent 28%),
        linear-gradient(145deg, #0f6c68 0%, #0d7f7a 46%, #185f7a 100%);
    color: #eef9f8;
    box-shadow: 0 22px 46px rgba(13, 127, 122, 0.22);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.site-footer-grid,
.site-footer-bottom {
    position: relative;
    z-index: 1;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 22px;
}

.site-footer-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 16px;
    background: #ffffff;
    color: #0f6f73;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
}

.site-footer-text {
    margin: 12px 0 0;
    color: rgba(245, 252, 251, 0.96);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 2.05;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.site-footer-heading {
    margin-bottom: 10px;
    font-size: 0.98rem;
    font-weight: 800;
}

.site-footer-links {
    display: grid;
    gap: 10px;
}

.site-footer-links a,
.site-footer-links span {
    color: rgba(238, 249, 248, 0.86);
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1.8;
}

.site-footer-links a:hover {
    color: #ffffff;
}

.site-footer-bottom {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(238, 249, 248, 0.72);
    font-size: 0.88rem;
    text-align: center;
}

.site-footer-logos {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding: 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer-logos-label {
    margin-bottom: 14px;
    color: rgba(238, 249, 248, 0.88);
    font-size: 0.86rem;
    font-weight: 800;
    text-align: center;
}

.site-footer-logos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.site-footer-logo-card {
    display: grid;
    place-items: center;
    min-height: 130px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 14px 24px rgba(5, 43, 54, 0.14);
}

.site-footer-logo-card-gold {
    background:
        radial-gradient(circle at top left, rgba(235, 199, 84, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(255, 250, 240, 0.98), rgba(230, 245, 241, 0.94));
}

.site-footer-logo-card-cyan {
    background:
        radial-gradient(circle at top right, rgba(47, 181, 181, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(245, 255, 255, 0.98), rgba(229, 243, 246, 0.94));
}

.site-footer-logo-card-mint {
    background:
        radial-gradient(circle at top left, rgba(117, 201, 110, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(232, 248, 238, 0.94));
}

.site-footer-logo-image {
    display: block;
    max-width: 100%;
    max-height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(12, 75, 84, 0.16));
}

.facilities-shell {
    position: relative;
    margin-top: 28px;
    padding: 30px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(22, 166, 160, 0.14), transparent 26%),
        radial-gradient(circle at bottom right, rgba(110, 168, 217, 0.12), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f5fbfb 54%, #edf7fa 100%);
    border: 1px solid rgba(22, 166, 160, 0.14);
    box-shadow: 0 22px 48px rgba(13, 127, 122, 0.08);
}

.facilities-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    border: 1px dashed rgba(22, 166, 160, 0.16);
    pointer-events: none;
}

.facilities-head,
.facilities-grid {
    position: relative;
    z-index: 1;
}

.facilities-head {
    margin-bottom: 20px;
    text-align: center;
}

.facilities-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(22, 166, 160, 0.1);
    color: #0d7f7a;
    font-size: 0.88rem;
    font-weight: 800;
}

.facilities-title {
    margin: 14px 0 0;
    color: #114f62;
    font-size: clamp(1.4rem, 1.9vw, 2rem);
    line-height: 1.35;
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.facility-card {
    --facility-accent: #149c99;
    --facility-accent-soft: rgba(20, 156, 153, 0.16);
    --facility-accent-deep: #0d706e;
    position: relative;
    padding: 24px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.98), transparent 30%),
        radial-gradient(circle at bottom right, var(--facility-accent-soft), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 250, 252, 0.96));
    border: 1px solid rgba(187, 220, 226, 0.92);
    box-shadow:
        0 22px 40px rgba(19, 83, 96, 0.08),
        0 10px 22px rgba(20, 156, 153, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.facility-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--facility-accent), color-mix(in srgb, var(--facility-accent) 55%, #95c0f4));
    border-radius: 999px;
}

.facility-card::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    background:
        linear-gradient(rgba(205, 229, 234, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(205, 229, 234, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 58%);
    pointer-events: none;
}

.facility-card:hover {
    transform: translateY(-5px);
    border-color: rgba(116, 176, 195, 0.9);
    box-shadow:
        0 28px 44px rgba(19, 83, 96, 0.12),
        0 14px 28px rgba(20, 156, 153, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.facility-card-cemeteries {
    --facility-accent: #10969b;
    --facility-accent-soft: rgba(16, 150, 155, 0.16);
    --facility-accent-deep: #0a6f73;
}

.facility-card-washing {
    --facility-accent: #2b7fdb;
    --facility-accent-soft: rgba(43, 127, 219, 0.16);
    --facility-accent-deep: #205f9f;
}

.facility-card-mosques {
    --facility-accent: #c4932e;
    --facility-accent-soft: rgba(196, 147, 46, 0.14);
    --facility-accent-deep: #936915;
}

.facility-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.facility-label-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #133f52;
    font-size: 1.08rem;
    font-weight: 800;
}

.facility-label-main i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--facility-accent) 14%, white), color-mix(in srgb, var(--facility-accent) 24%, white));
    color: var(--facility-accent-deep);
    font-size: 1.2rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 12px 18px rgba(20, 89, 104, 0.08);
}

.facility-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--facility-accent) 10%, white);
    border: 1px solid color-mix(in srgb, var(--facility-accent) 16%, #dbeaf0);
    color: var(--facility-accent-deep);
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.facility-list {
    display: grid;
    gap: 12px;
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.facility-card-mosques .facility-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.facility-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px 12px 12px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--facility-accent) 8%, white));
    border: 1px solid color-mix(in srgb, var(--facility-accent) 12%, #d8e8ef);
    color: #274d59;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 18px rgba(35, 76, 94, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.facility-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--facility-accent) 26%, #b8d5e2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 14px 22px rgba(35, 76, 94, 0.09);
}

.facility-item-name {
    min-width: 0;
    line-height: 1.7;
}

.facility-location-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--facility-accent) 16%, white), color-mix(in srgb, var(--facility-accent) 24%, white));
    color: var(--facility-accent-deep);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--facility-accent) 20%, #d9e7ef);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    animation: facility-location-pulse 1.8s ease-in-out infinite;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 10px 18px rgba(23, 82, 95, 0.08);
}

.facility-location-link::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--facility-accent) 38%, transparent);
    opacity: 0;
    animation: facility-location-ring 1.8s ease-out infinite;
}

.facility-location-link:hover {
    transform: translateY(-1px);
    background: var(--facility-accent);
    color: #ffffff;
    animation-play-state: paused;
}

.facility-location-link:hover::after {
    animation-play-state: paused;
}

@keyframes facility-location-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(214, 158, 46, 0.24);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(214, 158, 46, 0);
    }
}

@keyframes facility-location-ring {
    0% {
        transform: scale(0.88);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

.stats-shell::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 26px;
    border: 1px dashed rgba(22, 166, 160, 0.18);
    pointer-events: none;
}

.stats-head,
.stats-panel {
    position: relative;
    z-index: 1;
}

.stats-head {
    margin-bottom: 22px;
    text-align: center;
}

.stats-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(22, 166, 160, 0.1);
    color: #0d7f7a;
    font-size: 0.88rem;
    font-weight: 800;
}

.stats-section-title {
    margin: 14px 0 0;
    color: #114f62;
    font-size: clamp(1.5rem, 2vw, 2.15rem);
    line-height: 1.35;
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.stats-panel-card {
    --stats-accent: #1aa7a1;
    --stats-accent-soft: rgba(26, 167, 161, 0.16);
    --stats-accent-strong: #0f766e;
    position: relative;
    overflow: hidden;
    min-height: 286px;
    padding: 20px 18px 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.98), transparent 34%),
        radial-gradient(circle at bottom left, var(--stats-accent-soft), transparent 42%),
        linear-gradient(160deg, #ffffff 0%, #f8fcff 54%, #eef8f7 100%);
    border: 1px solid rgba(160, 206, 216, 0.65);
    box-shadow:
        0 18px 38px rgba(14, 65, 80, 0.08),
        0 10px 22px rgba(26, 167, 161, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stats-panel-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.stats-panel-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -72px;
    left: -56px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stats-accent-soft) 0%, transparent 68%);
    pointer-events: none;
}

.stats-panel-card:hover {
    transform: translateY(-4px);
    border-color: rgba(95, 163, 183, 0.8);
    box-shadow:
        0 26px 46px rgba(14, 65, 80, 0.12),
        0 14px 28px rgba(26, 167, 161, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.stats-panel-card:nth-child(2) {
    --stats-accent: #3984d8;
    --stats-accent-soft: rgba(57, 132, 216, 0.16);
    --stats-accent-strong: #245d9d;
}

.stats-panel-card:nth-child(3) {
    --stats-accent: #d78b2f;
    --stats-accent-soft: rgba(215, 139, 47, 0.16);
    --stats-accent-strong: #9f5f14;
}

.stats-panel-card:nth-child(4) {
    --stats-accent: #8359d1;
    --stats-accent-soft: rgba(131, 89, 209, 0.16);
    --stats-accent-strong: #5f36ab;
}

.stats-panel-card:nth-child(5) {
    --stats-accent: #0e8ca4;
    --stats-accent-soft: rgba(14, 140, 164, 0.16);
    --stats-accent-strong: #0b6475;
}

.stats-panel-card-distribution {
    --stats-accent: #7d63c9;
    --stats-accent-soft: rgba(125, 99, 201, 0.16);
    --stats-accent-strong: #5941a5;
}

.stats-panel-card-transport {
    --stats-accent: #0e8ca4;
    --stats-accent-soft: rgba(14, 140, 164, 0.16);
    --stats-accent-strong: #0b6475;
}

.stats-panel-card-fleet {
    --stats-accent: #16a6a0;
    --stats-accent-soft: rgba(22, 166, 160, 0.16);
    --stats-accent-strong: #0f766e;
}

.stats-panel-card-distribution,
.stats-panel-card-transport,
.stats-panel-card-fleet {
    display: flex;
    flex-direction: column;
}

.stats-panel-topline {
    width: calc(100% + 36px);
    height: 6px;
    margin: -20px -18px 20px;
    background: linear-gradient(90deg, var(--stats-accent) 0%, color-mix(in srgb, var(--stats-accent) 56%, #8fc2ff) 100%);
}

.stats-panel-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    color: #244754;
    font-size: 1.62rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.stats-panel-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--stats-accent) 18%, white), color-mix(in srgb, var(--stats-accent) 30%, white));
    color: var(--stats-accent-strong);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 18px rgba(35, 76, 94, 0.08);
    font-size: 1.15rem;
    flex: 0 0 42px;
}

.stats-panel-title span {
    display: inline-block;
}

.stats-panel-value {
    margin-top: 12px;
    color: var(--stats-accent-strong);
    font-family: 'Cairo', sans-serif;
    font-size: clamp(2.7rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 6px 18px rgba(255, 255, 255, 0.8);
}

.stats-panel-divider {
    height: 1px;
    margin: 18px 0 14px;
    background: linear-gradient(90deg, transparent, rgba(109, 154, 174, 0.28), transparent);
}

.stats-card-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 172px;
    padding: 10px 0 18px;
}

.stats-card-image {
    display: block;
    width: min(100%, 220px);
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(12, 75, 84, 0.12));
}

.stats-panel-card-vehicles .stats-card-image-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 25px;
    width: 100%;
    height: 42px;
    transform: none;
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--stats-accent) 10%, white) 0%,
            color-mix(in srgb, var(--stats-accent) 28%, white) 15%,
            color-mix(in srgb, var(--stats-accent) 48%, white) 100%);
    box-shadow:
        0 10px 24px rgba(58, 151, 148, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    z-index: 0;
}

.stats-panel-card-vehicles .stats-card-image {
    position: relative;
    z-index: 1;
}

.stats-chart-wrap {
    position: relative;
    min-height: 240px;
    margin-top: 50px;
    margin-bottom: -20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media (max-width: 768px) {
    .stats-chart-wrap {
        margin-bottom: 20px !important;
    }
}

.stats-panel-card-distribution .stats-chart-wrap {
    align-self: center;
    margin-inline: auto;
}

.stats-chart {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 320px;
    height: 240px;
    animation: stats-chart-spin 18s linear infinite;
    transform-origin: center center;
    margin-inline: auto;
}

.stats-chart:hover {
    animation-play-state: paused;
}

.stats-chart>div,
.stats-chart svg,
.stats-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.stats-chart svg {
    overflow: visible;
}

.stats-panel-card-distribution .stats-chart {
    max-width: 100%;
}

.stats-chart-center-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    isolation: isolate;
}

.stats-chart-center-mark::before {
    content: "";
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.98), rgba(233, 246, 245, 0.92) 58%, rgba(196, 227, 224, 0.88) 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 24px 42px rgba(17, 79, 98, 0.18),
        0 0 0 10px rgba(22, 166, 160, 0.08),
        inset 0 2px 10px rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
}

.stats-chart-center-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(22, 166, 160, 0.22), rgba(78, 143, 226, 0.12), rgba(215, 139, 47, 0.2), rgba(22, 166, 160, 0.22));
    filter: blur(16px);
    opacity: 0.9;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.stats-chart-center-mark img {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    padding: 7px;
    filter: drop-shadow(0 10px 18px rgba(17, 79, 98, 0.18)) saturate(1.08);
    transform: translateY(-1px) scale(1.03);
}

@keyframes stats-chart-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.stats-chart-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    margin-top: auto;
    padding-top: 0 !important;
    position: relative;
    z-index: 2;
}

.stats-chart-meta-item-wide {
    grid-column: 1 / -1;
}

.stats-chart-meta-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.94));
    border: 1px solid color-mix(in srgb, var(--stats-accent) 18%, #d7e6ef);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 10px 18px rgba(35, 76, 94, 0.06);
    color: #234653;
    font-size: 1.02rem;
    font-weight: 800;
}

.stats-chart-meta-item strong {
    color: var(--stats-accent-strong);
    font-size: 1.05rem;
}

.stats-chart-meta-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.82);
}

.stats-chart-meta-dot-bukayriyah {
    background: #16a6a0;
}

.stats-chart-meta-dot-hilaliyah {
    background: #4e8fe2;
}

.stats-chart-meta-dot-shihiyah {
    background: #d78b2f;
}

.stats-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
}

.stats-chip-grid .stats-chip-wide {
    grid-column: 1 / -1;
}

.stats-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.94));
    border: 1px solid color-mix(in srgb, var(--stats-accent) 18%, #d7e6ef);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 10px 18px rgba(35, 76, 94, 0.06);
    color: #234653;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.stats-panel-card-transport .stats-chip-grid,
.stats-panel-card-fleet .stats-chip-grid {
    margin-top: auto;
}

.stats-panel-card-distribution .stats-chart-meta-item,
.stats-panel-card-transport .stats-chip,
.stats-panel-card-fleet .stats-chip {
    min-height: 56px;
    border-radius: 18px;
    font-size: 1.02rem;
    font-weight: 800;
}

.stats-chip-with-badge {
    justify-content: center;
    gap: 10px;
    padding-inline: 14px 12px;
}

.stats-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--stats-accent), var(--stats-accent-strong));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--stats-accent) 28%, transparent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.empty-showcase-shell {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    margin-top: 28px;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(22, 166, 160, 0.14), transparent 26%),
        radial-gradient(circle at bottom right, rgba(13, 127, 122, 0.12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f4fbfa 54%, #e4f4f2 100%);
    border: 1px solid rgba(22, 166, 160, 0.16);
    box-shadow: 0 24px 60px rgba(13, 127, 122, 0.1);
}

.empty-showcase-shell::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    border: 1px dashed rgba(22, 166, 160, 0.24);
}

.empty-showcase-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    padding: 40px 32px;
    text-align: center;
}

.empty-showcase-title {
    margin: 0 0 18px;
    color: #0f6c68;
    font-size: clamp(1.6rem, 2.3vw, 2.4rem);
    line-height: 1.4;
}

.empty-showcase-title-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.18), var(--identity-accent-soft));
    border: 1px solid rgba(110, 168, 217, 0.24);
    color: #084e4a;
    box-shadow: 0 12px 24px rgba(63, 120, 176, 0.14);
}

.empty-showcase-text {
    margin: 0;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #1f4543;
    font-size: clamp(1.08rem, 1.35vw, 1.28rem);
    font-weight: 700;
    line-height: 2.15;
    letter-spacing: 0.01em;
    text-align: center;
    text-wrap: balance;
}

.empty-showcase-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.12), rgba(110, 168, 217, 0.12));
    border: 1px solid rgba(22, 166, 160, 0.18);
    color: var(--identity-accent-deep);
    font-size: 1.04em;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(13, 127, 122, 0.08);
}

.empty-showcase-subtext {
    display: block;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.empty-showcase-text-card {
    width: min(1180px, 100%);
    padding: 30px 32px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(236, 249, 247, 0.92));
    border: 1px solid rgba(22, 166, 160, 0.14);
    box-shadow: 0 18px 34px rgba(13, 127, 122, 0.08);
}

.text-emphasis {
    display: inline-block;
    margin-bottom: 6px;
    color: #ffffff;
    font-size: 1.08em;
    font-weight: 800;
}

.empty-showcase-text .text-emphasis {
    display: block;
    width: fit-content;
    margin: 0 auto 10px;
    color: var(--identity-accent-deep);
}

.empty-showcase-lead {
    color: var(--identity-accent-deep);
    font-weight: 800;
}

.empty-showcase-separator {
    color: var(--identity-accent);
    font-weight: 700;
}

.empty-showcase-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
    align-items: start;
}

.empty-showcase-pillar-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.empty-showcase-pillar {
    position: relative;
    padding: 28px 22px 22px;
    border-radius: 24px;
    text-align: right;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(228, 246, 242, 0.88));
    border: 1px solid rgba(13, 127, 122, 0.14);
    box-shadow: 0 16px 28px rgba(13, 127, 122, 0.08);
    overflow: hidden;
}

.empty-showcase-pillar::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(22, 166, 160, 0.15), rgba(13, 127, 122, 0.65), rgba(22, 166, 160, 0.15));
}

.empty-showcase-pillar-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--identity-accent-soft), rgba(255, 248, 231, 0.92));
    border: 1px dashed rgba(110, 168, 217, 0.52);
    color: var(--identity-accent-deep);
    font-size: 1rem;
    font-weight: 800;
}

.empty-showcase-pillar-text {
    margin: 0;
    color: #244c49;
    font-size: 1rem;
    line-height: 2;
    font-weight: 700;
}

.empty-showcase-areas-wrap {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(13, 127, 122, 0.12);
}

.empty-showcase-areas-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--identity-accent-soft), rgba(255, 250, 240, 0.92));
    color: var(--identity-accent-deep);
    font-size: 0.95rem;
    font-weight: 800;
}

.empty-showcase-areas-label i {
    font-size: 0.95rem;
}

.empty-showcase-areas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.empty-showcase-area {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.08), rgba(255, 249, 237, 0.94));
    border: 1px solid rgba(110, 168, 217, 0.24);
    color: var(--identity-accent-deep);
    font-size: 0.96rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.empty-showcase-area:hover,
.empty-showcase-area:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(63, 120, 176, 0.45);
    box-shadow: 0 10px 18px rgba(63, 120, 176, 0.12);
    outline: none;
}

.empty-showcase-tasks-wrap {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(13, 127, 122, 0.12);
}

.empty-showcase-tasks-label {
    margin-bottom: 18px;
}

.empty-showcase-tasks-panel {
    position: relative;
    padding: 28px;
    border-radius: 30px;
    text-align: right;
    background:
        radial-gradient(circle at top left, rgba(110, 168, 217, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(22, 166, 160, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 249, 252, 0.96));
    border: 1px solid rgba(110, 168, 217, 0.2);
    box-shadow: 0 24px 42px rgba(63, 120, 176, 0.09);
    overflow: hidden;
}

.empty-showcase-tasks-panel::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

.empty-showcase-tasks-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
    gap: 16px;
    margin-bottom: 22px;
}

.empty-showcase-tasks-intro {
    margin: 0;
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(22, 166, 160, 0.09), rgba(110, 168, 217, 0.1));
    color: #285865;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.9;
}

.empty-showcase-tasks-note {
    margin: 0;
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(110, 168, 217, 0.16);
    color: var(--identity-accent-deep);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.9;
    box-shadow: 0 12px 24px rgba(63, 120, 176, 0.05);
}

.empty-showcase-tasks {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.empty-showcase-tasks::before {
    content: none;
}

.empty-showcase-task-step {
    position: relative;
    display: block;
    min-height: 290px;
    padding: 22px 24px 28px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 254, 0.94));
    border: 1px solid rgba(198, 226, 243, 0.95);
    box-shadow:
        0 18px 30px rgba(63, 120, 176, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
}

.empty-showcase-task-step:hover,
.empty-showcase-task-step:focus-within {
    transform: translateY(-4px);
    border-color: rgba(138, 193, 231, 0.95);
    box-shadow:
        0 24px 38px rgba(63, 120, 176, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.empty-showcase-task-marker {
    display: none;
}

.empty-showcase-task-number {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--identity-accent-deep);
}

.empty-showcase-task-marker i {
    font-size: 1.45rem;
    color: #11839f;
}

.empty-showcase-task-content {
    min-width: 0;
    padding-top: 8px;
    text-align: right;
}

.empty-showcase-task-title {
    margin: 0 0 14px;
    color: #114f62;
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.4;
}

.empty-showcase-task-text {
    margin: 0;
    color: #335a5f;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.95;
}

.empty-showcase-task-step::before {
    content: "";
    position: absolute;
    inset: auto 18px 0 18px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a6a0, var(--identity-accent));
    opacity: 0.82;
}


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

    .scroll-welcome-target {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
        will-change: auto;
    }

}

.hero-shell::before,
.hero-shell::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-shell::before {
    width: 240px;
    height: 240px;
    top: -90px;
    left: -70px;
    background: radial-gradient(circle, rgba(22, 166, 160, 0.16), transparent 68%);
}

.hero-shell::after {
    width: 220px;
    height: 220px;
    right: -80px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(13, 127, 122, 0.18), transparent 70%);
}

.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(460px, 760px) 1fr;
    gap: 40px;
    align-items: center;
}

.basmala-card {
    position: relative;
    padding: 30px;
    min-height: 660px;
    transform: translateX(18px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(22, 166, 160, 0.2);
    box-shadow: 0 22px 36px rgba(13, 127, 122, 0.12);
}

.basmala-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(22, 166, 160, 0.28);
    border-radius: 22px;
}

.basmala-frame {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 248, 246, 0.98));
}

.basmala-frame video,
.basmala-frame img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    background: #eaf7f5;
    filter: drop-shadow(0 14px 20px rgba(13, 127, 122, 0.12));
}

.basmala-placeholder {
    text-align: center;
    color: #48706d;
    line-height: 1.9;
}

.basmala-placeholder i {
    display: inline-flex;
    margin-bottom: 12px;
    font-size: 2rem;
    color: #0d7f7a;
}

.hero-copy {
    position: relative;
    z-index: 1;
    color: #173d3a;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    padding-top: 0;
    width: 100%;
}

.hero-partner-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: min(100%, 720px);
    min-height: 620px;
    margin-bottom: 22px;
    transform: translateY(-8px);
}

.hero-partner-logo-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 260px);
    padding: 18px 20px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.94), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(234, 248, 246, 0.94));
    border: 1px solid rgba(22, 166, 160, 0.18);
    box-shadow:
        0 18px 30px rgba(13, 127, 122, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hero-partner-logo-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    border: 1px dashed rgba(22, 166, 160, 0.22);
    pointer-events: none;
}

.hero-partner-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(120px, 14vw, 165px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-license-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 10px 18px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 247, 245, 0.96));
    border: 1px solid rgba(13, 127, 122, 0.18);
    box-shadow: 0 14px 24px rgba(13, 127, 122, 0.1);
    color: var(--identity-accent-deep);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
}

.hero-license-badge::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a6a0, #0d7f7a);
    box-shadow:
        0 0 0 6px rgba(22, 166, 160, 0.12),
        0 0 10px rgba(22, 166, 160, 0.45),
        0 0 18px rgba(22, 166, 160, 0.3);
    animation: license-badge-lamp 1.8s ease-in-out infinite;
}

@keyframes license-badge-lamp {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 6px rgba(22, 166, 160, 0.12),
            0 0 10px rgba(22, 166, 160, 0.45),
            0 0 18px rgba(22, 166, 160, 0.3);
    }

    50% {
        transform: scale(1.12);
        box-shadow:
            0 0 0 8px rgba(22, 166, 160, 0.18),
            0 0 16px rgba(22, 166, 160, 0.72),
            0 0 28px rgba(22, 166, 160, 0.44);
    }
}

.hero-registration-image {
    display: block;
    width: 100%;
    margin-top: 0;
    border-radius: 18px;
}

.hero-registration-card {
    position: relative;
    width: min(100%, 760px);
    margin-top: 14px;
    min-height: 430px;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 248, 246, 0.94));
    border: 1px solid rgba(22, 166, 160, 0.16);
    box-shadow: 0 18px 32px rgba(13, 127, 122, 0.12);
}

.hero-registration-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    border: 1px dashed rgba(22, 166, 160, 0.22);
    pointer-events: none;
}

@media screen and (max-width: 1024px) and (hover: none),
screen and (max-width: 1024px) and (pointer: coarse) {
    body {
        flex-direction: column;
        min-height: auto;
    }

    .content-shell,
    .main-wrapper {
        display: flex;
        padding-top: 78px;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-right: 0;
    }

    .content-shell {
        order: initial;
    }

    main {
        padding: 20px;
    }

    .topbar-banner {
        width: min(100%, 340px);
        padding: 16px 18px;
        margin-bottom: 18px;
    }

    .hero-inline-banner {
        margin-bottom: 18px;
        border-radius: 30px;
    }

    .hero-inline-banner-image {
        height: 170px;
    }

    .hero-content {
        grid-template-columns: 1fr;
    }

    .stats-shell {
        padding: 22px;
        border-radius: 26px;
    }

    .tweet-gallery-shell {
        padding: 22px;
        border-radius: 26px;
    }

    .app-showcase-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 22px;
        border-radius: 26px;
        text-align: center;
    }

    .app-showcase-sponsor {
        position: static;
        width: min(100%, 250px);
        margin: 8px auto 18px;
    }

    .app-showcase-text {
        max-width: none;
    }

    .app-showcase-step-card {
        grid-template-columns: 56px 1fr;
        border-radius: 26px;
        padding: 10px 12px;
    }

    .app-showcase-step-number {
        width: 46px;
        height: 46px;
        font-size: 1.45rem;
    }

    .app-showcase-step-text {
        font-size: 1rem;
    }

    .app-showcase-store-links {
        grid-template-columns: 1fr;
    }

    .app-showcase-store-head {
        flex-direction: column;
        align-items: center;
    }

    .app-showcase-store-link {
        min-height: 230px;
    }

    .success-partners-shell {
        padding: 22px;
        border-radius: 26px;
    }

    .site-footer {
        margin: 22px 20px 20px;
        padding: 22px 20px 16px;
        border-radius: 24px;
    }

    .site-footer-grid {
        grid-template-columns: 1fr;
    }

    .site-footer-logos-grid {
        grid-template-columns: 1fr;
    }

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

    .tweet-card {
        flex-basis: 300px;
    }

    .iphone-mockup {
        width: min(100%, 270px);
        border-radius: 44px;
        padding: 11px;
    }

    .iphone-mockup::before {
        border-radius: 38px;
    }

    .iphone-mockup-screen {
        border-radius: 33px;
    }

    .iphone-mockup-speaker {
        top: 16px;
        width: 92px;
        height: 26px;
    }

    .facilities-shell {
        padding: 22px;
        border-radius: 26px;
    }

    .facilities-grid {
        grid-template-columns: 1fr;
    }

    .facility-label {
        flex-direction: column;
        align-items: stretch;
    }

    .facility-count {
        align-self: flex-start;
    }

    .facility-card-mosques .facility-list {
        grid-template-columns: 1fr;
    }

    .stats-panel {
        grid-template-columns: 1fr;
    }

    .basmala-card {
        transform: none;
    }

    .hero-partner-logo {
        width: clamp(110px, 34vw, 150px);
    }

    .hero-partner-logo-card {
        width: min(100%, 220px);
        padding: 14px 16px;
        border-radius: 22px;
    }

    .hero-partner-mark {
        min-height: auto;
        transform: none;
    }

    .hero-registration-image {
        width: 100%;
    }

    .hero-registration-card {
        width: min(100%, 440px);
        min-height: auto;
        padding: 12px;
    }

    .empty-showcase-text-card {
        padding: 20px 18px;
        border-radius: 22px;
    }

    .empty-showcase-pillars {
        grid-template-columns: 1fr;
    }

    .empty-showcase-tasks-head,
    .empty-showcase-tasks {
        grid-template-columns: 1fr;
    }

    .empty-showcase-tasks-panel {
        padding: 18px;
    }

    .empty-showcase-task-step {
        padding: 16px;
        min-height: auto;
    }

    .empty-showcase-task-marker {
        display: none;
    }

    .empty-showcase-task-content {
        padding-top: 0;
    }

    .empty-showcase-task-title {
        font-size: 1.14rem;
    }

    .empty-showcase-areas {
        gap: 8px;
    }

    .basmala-frame {
        min-height: 400px;
    }

    .basmala-frame video,
    .basmala-frame img {
        min-height: 360px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1365px) {
    .content-shell {
        width: calc(100% - var(--sidebar-width-narrow));
        margin-right: var(--sidebar-width-narrow);
    }
}

@media screen and (max-width: 1500px) and (hover: hover) and (pointer: fine) {
    .content-shell {
        width: calc(100% - var(--sidebar-width-compact));
        margin-right: var(--sidebar-width-compact);
    }

    main {
        padding: 20px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tweet-card {
        flex-basis: 300px;
    }

    .success-partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .basmala-card {
        transform: none;
    }

    .basmala-frame {
        min-height: 360px;
    }

    .basmala-frame video,
    .basmala-frame img {
        min-height: 320px;
    }
}

@media screen and (max-width: 640px) and (hover: none),
screen and (max-width: 640px) and (pointer: coarse) {
    .hero-shell {
        padding: 22px;
        border-radius: 24px;
    }

    .stats-panel-card {
        min-height: auto;
    }

    .stats-chip-grid {
        grid-template-columns: 1fr;
    }

    .tweet-card {
        flex-basis: 250px;
    }

    .success-partners-grid {
        grid-template-columns: 1fr;
    }

    .success-partner-card {
        min-height: auto;
    }

    .success-partner-mark {
        min-height: 118px;
    }

    .stats-chip-grid .stats-chip-wide {
        grid-column: auto;
    }

    .stats-panel-title {
        font-size: 1.4rem;
    }

    .stats-panel-title i {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .stats-panel-value {
        font-size: clamp(2.35rem, 10vw, 3.2rem);
    }

    .stats-panel-card-staff .stats-panel-value {
        display: inline-block;
        direction: ltr;
        unicode-bidi: isolate;
        white-space: nowrap;
        letter-spacing: 0;
    }

    .stats-chart {
        height: 228px;
    }

    .stats-chip {
        min-height: 52px;
        font-size: 1.02rem;
    }

    .stats-chip-grid-staff .stats-chip-with-badge {
        justify-content: space-between;
        gap: 12px;
        padding-inline: 16px 14px;
    }

    .stats-chip-grid-staff .stats-chip-with-badge > span:last-child {
        flex: 1;
        text-align: center;
    }

    .stats-chart-meta-item {
        font-size: 0.96rem;
    }

    .basmala-card {
        padding: 18px;
        min-height: auto;
    }

    .basmala-frame {
        min-height: auto;
        padding: 12px;
    }

    .basmala-frame video,
    .basmala-frame img {
        height: auto;
        min-height: 0;
    }

    .hero-copy {
        padding-top: 0;
    }

    .hero-partner-mark {
        margin-bottom: 0;
    }

}

/* --- Tasks Section --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tasks-wrapper {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(22, 166, 160, 0.15);
    text-align: center;
}

.tasks-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-weight: 800;
    color: var(--rahmah-primary-dark);
    margin-bottom: 3rem;
    font-size: 1.6rem;
    padding: 16px 50px;
    background: linear-gradient(180deg, #ffffff 0%, #f1fafa 100%);
    border-radius: 999px;
    box-shadow: 0 16px 36px rgba(13, 127, 122, 0.12);
    border: 1px solid rgba(22, 166, 160, 0.15);
    position: relative;
}

.tasks-label::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    border: 1px dashed rgba(22, 166, 160, 0.3);
}

.tasks-label i {
    font-size: 1.5em;
    color: var(--rahmah-primary);
    filter: drop-shadow(0 2px 4px rgba(22, 166, 160, 0.2));
}

.tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    text-align: right;
}

.task-card {
    background: #ffffff;
    border: 1px solid rgba(22, 166, 160, 0.15);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    /* البداية مخفية */
    animation: slideInUp 0.6s ease-out forwards;
}

.task-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(13, 127, 122, 0.1);
    border-color: rgba(22, 166, 160, 0.4);
}

.task-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rahmah-primary), #6ea8d9);
    opacity: 0.7;
}

.task-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--rahmah-primary-soft);
    color: var(--rahmah-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

.task-card:hover .task-icon {
    background: var(--rahmah-primary);
    color: #ffffff;
    transform: rotate(-10deg) scale(1.1);
}

.task-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--rahmah-text);
    font-weight: 600;
}

/* تأخير زمني لكل بطاقة لعمل تأثير التتابع */
.task-card:nth-child(1) {
    animation-delay: 0.1s;
}

.task-card:nth-child(2) {
    animation-delay: 0.2s;
}

.task-card:nth-child(3) {
    animation-delay: 0.3s;
}

.task-card:nth-child(4) {
    animation-delay: 0.4s;
}

.task-card:nth-child(5) {
    animation-delay: 0.5s;
}

.task-card:nth-child(6) {
    animation-delay: 0.6s;
}

.task-card:nth-child(7) {
    animation-delay: 0.7s;
}




.page-transition-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(244, 247, 246, 0.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: 9999;
}

.page-transition-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.page-transition-loader {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0 42%, rgba(255, 255, 255, 0.78) 43% 100%);
    box-shadow: 0 22px 40px rgba(13, 127, 122, 0.16);
}

.page-transition-loader::before,
.page-transition-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.page-transition-loader::before {
    border: 4px solid rgba(22, 166, 160, 0.12);
}

.page-transition-loader::after {
    inset: 6px;
    border: 4px solid transparent;
    border-top-color: #16a6a0;
    border-right-color: #6ea8d9;
    animation: rahmah-page-spin 0.85s linear infinite;
}

.page-transition-loader__dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #16a6a0, #0d7f7a);
    box-shadow: 0 0 0 8px rgba(22, 166, 160, 0.12);
}

@keyframes rahmah-page-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-overlay {
        transition: none;
    }

    .page-transition-loader::after {
        animation-duration: 1.6s;
    }
}