/* ============================================================
   Bassma Group — Stylesheet
   Colors sourced from the CV: deep purple + vivid orange
   ============================================================ */

:root {
    --purple-900: #1a0a30;
    --purple-800: #25124a;
    --purple-700: #341a62;
    --purple-600: #462584;
    --purple-500: #5a2fa8;
    --orange: #f19018;
    --orange-soft: #f7a836;
    --orange-dark: #d87a0b;
    --cream: #fff4e4;
    --text-light: #f5efe7;
    --muted: #c2b5d8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Cairo', sans-serif;
    background: var(--purple-900);
    color: var(--text-light);
    overflow-x: hidden;
    min-height: 100vh;
}
html[dir="ltr"] body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
body.intro-active { overflow: hidden; height: 100vh; }
::selection { background: var(--orange); color: var(--purple-900); }

/* ============ INTRO SCREEN ============ */
.intro-screen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, var(--purple-700) 0%, var(--purple-900) 70%);
    transition: background .8s ease;
}
.intro-screen::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(241,144,24,.18), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(90,47,168,.4), transparent 50%);
    pointer-events: none;
}
.intro-grid {
    position: absolute; inset: 0; opacity: .15; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 40px 40px;
}
.intro-hint {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    font-size: 14px; letter-spacing: 2px; color: var(--muted);
    animation: pulse 2s ease infinite;
    text-align: center;
    width: max-content; max-width: 90vw;
    display: flex; align-items: center; justify-content: center;
    padding: 0 16px;
}
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.logo-stage {
    position: relative; width: min(500px, 80vw); height: min(500px, 80vw);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.logo-svg { width: 100%; height: 100%; overflow: visible; }
.fingerprint-group { transform-origin: 250px 200px; }
.logo-image-wrap {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    will-change: filter, transform, opacity;
}
.logo-image-wrap::before {
    content: ''; position: absolute; inset: -8%;
    background:
        radial-gradient(circle at 50% 50%, rgba(241,144,24,.45), rgba(241,144,24,.18) 35%, transparent 65%);
    filter: blur(28px);
    z-index: -1;
    animation: logoAura 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes logoAura {
    0%, 100% { opacity: .65; transform: scale(.95); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
.logo-image {
    width: 100%; height: 100%; object-fit: contain;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 14px rgba(241,144,24,.55))
        drop-shadow(0 20px 40px rgba(0,0,0,.45));
}
.scan-line {
    position: absolute; left: 15%; right: 15%; height: 3px; top: 40%;
    background: linear-gradient(90deg, transparent, var(--orange), var(--orange-soft), var(--orange), transparent);
    box-shadow: 0 0 20px 4px rgba(241,144,24,.7), 0 0 40px rgba(241,144,24,.5);
    opacity: 0; transform: translateY(-80px);
    pointer-events: none; z-index: 5;
}
.scan-glow {
    position: absolute; left: 20%; right: 20%; height: 60px; top: 35%;
    background: linear-gradient(180deg, rgba(241,144,24,.35), transparent);
    opacity: 0; transform: translateY(-60px);
    filter: blur(12px); pointer-events: none; z-index: 4;
}

/* ============ NAV ============ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    padding: 6px 48px; display: flex; align-items: center; justify-content: space-between;
    background: rgba(26,10,48,.75); backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(241,144,24,.15);
    transform: translateY(-100%); transition: transform .6s ease;
    min-height: 110px;
}
.navbar.ready { transform: translateY(0); }
.nav-logo-slot {
    width: 150px; height: 150px; position: relative;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; flex-shrink: 0;
    transition: transform .35s ease;
    margin: -25px 0;
}
.nav-logo-slot::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(241,144,24,.45), rgba(241,144,24,.15) 38%, transparent 65%);
    filter: blur(18px);
    z-index: -1;
    animation: logoAura 4.5s ease-in-out infinite;
    pointer-events: none;
}
.nav-logo-slot:hover { transform: scale(1.06); }
.nav-logo-slot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(241,144,24,.4)) drop-shadow(0 6px 12px rgba(0,0,0,.55));
    transition: filter .35s ease;
    position: relative; z-index: 1;
}
.nav-logo-slot:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(241,144,24,.85)) drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a {
    color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 15px;
    position: relative; padding: 6px 2px; transition: color .3s;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 2px;
    background: var(--orange); transition: width .3s;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a:hover::after { width: 100%; }
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(241,144,24,.35);
    background: rgba(255,255,255,.06);
    flex-shrink: 0;
}
.lang-switch-btn {
    padding: 10px 16px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--text-light);
    text-decoration: none;
    transition: background .25s, color .25s;
    min-width: 48px;
    text-align: center;
}
.lang-switch-btn:hover {
    color: #fff;
    background: rgba(241,144,24,.15);
}
.lang-switch-btn.is-active {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nav-toggle {
    display: none; background: none; border: none; color: var(--text-light);
    font-size: 24px; cursor: pointer;
}

/* ============ MAIN CONTENT ============ */
main { opacity: 0; transition: opacity 1s ease .5s; }
main.visible { opacity: 1; }

/* Hero */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 120px 48px 140px; position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 15% 30%, rgba(241,144,24,.18), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(90,47,168,.5), transparent 55%);
}
.hero-content {
    max-width: 1280px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: center; position: relative; z-index: 2;
}
.hero-text h1 {
    font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 900; line-height: 1.1;
    margin-bottom: 20px;
}
.hero-text h1 .accent { color: var(--orange); display: inline-block; }
.hero-text .tagline {
    font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--muted); margin-bottom: 16px; font-weight: 300;
}
.hero-text .quote {
    font-size: 1.1rem; color: var(--text-light); margin-bottom: 32px; line-height: 1.8;
    border-right: 3px solid var(--orange); padding-right: 16px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px; border-radius: 999px; font-weight: 700; text-decoration: none;
    font-size: 15px; transition: all .3s; cursor: pointer; border: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff; box-shadow: 0 8px 28px rgba(241,144,24,.4);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(241,144,24,.55); }
.btn-ghost {
    background: rgba(255,255,255,.08); color: var(--text-light);
    border: 1px solid rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); border-color: var(--orange); color: var(--orange); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
@keyframes pulseGlow { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1.1);opacity:1} }

/* ===== Hero Stack (collage behind, certificate front) ===== */
.hero-stack {
    position: relative;
    width: 100%; max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}

/* ===== Hero Collage (decorative background) ===== */
.hero-collage-bg {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
}
.hero-collage-bg .collage-item {
    position: absolute;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(241,144,24,.35);
    box-shadow: 0 25px 55px rgba(0,0,0,.5);
    background: var(--purple-800);
    opacity: .55;
    filter: saturate(.8) blur(.3px);
    transition: opacity .55s ease, filter .55s ease, transform .55s ease;
}
.hero-collage-bg .collage-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-collage-bg .collage-tl {
    width: 36%; height: 36%; left: -8%; top: 2%;
    rotate: -10deg;
    animation: floatA 7s ease-in-out infinite;
}
.hero-collage-bg .collage-tr {
    width: 32%; height: 32%; right: -6%; top: -4%;
    rotate: 9deg;
    animation: floatB 8s ease-in-out infinite;
}
.hero-collage-bg .collage-bl {
    width: 32%; height: 32%; left: -4%; bottom: 6%;
    rotate: -7deg;
    animation: floatC 7.5s ease-in-out infinite;
}
.hero-collage-bg .collage-br {
    width: 38%; height: 38%; right: -8%; bottom: -2%;
    rotate: 8deg;
    animation: floatD 6.5s ease-in-out infinite;
}
.hero-stack:hover .hero-collage-bg .collage-item {
    opacity: .85;
    filter: saturate(1) blur(0);
}

@keyframes floatA { 0%,100% { translate: 0 0; }    50% { translate: -6px -14px; } }
@keyframes floatB { 0%,100% { translate: 0 0; }    50% {  translate: 8px -10px;  } }
@keyframes floatC { 0%,100% { translate: 0 0; }    50% { translate: -8px 12px;   } }
@keyframes floatD { 0%,100% { translate: 0 0; }    50% { translate: 10px 14px;   } }

/* ===== Hero Certificate Display ===== */
.hero-cert {
    position: relative;
    z-index: 5;
    width: 78%; max-width: 460px;
    margin: 0 auto;
    background: none; border: none; padding: 0;
    cursor: zoom-in;
    font-family: inherit;
    perspective: 1500px;
}
.cert-glow {
    position: absolute; inset: -18%;
    border-radius: 30%;
    background:
        radial-gradient(circle, rgba(26,10,48,.95) 25%, rgba(241,144,24,.45) 45%, rgba(90,47,168,.25) 65%, transparent 80%);
    z-index: 0;
    filter: blur(28px);
    animation: pulseGlow 5s ease-in-out infinite;
    pointer-events: none;
}
.cert-frame {
    position: relative; z-index: 2;
    border-radius: 18px;
    overflow: hidden;
    border: 4px solid rgba(241,144,24,.55);
    background: #fff;
    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 0 1px rgba(241,144,24,.4),
        0 0 60px rgba(241,144,24,.25),
        inset 0 0 0 4px rgba(241,144,24,.18);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.8,.2,1),
                box-shadow .55s ease,
                border-color .55s ease;
    animation: floatCert 6s ease-in-out infinite;
}
.cert-frame::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(135deg, rgba(241,144,24,.0) 30%, rgba(241,144,24,.18) 60%, rgba(241,144,24,.0) 90%);
    pointer-events: none; z-index: 3;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
    transform: translateX(-100%) translateY(-100%);
    mix-blend-mode: overlay;
}
.cert-frame img {
    width: 100%; height: auto;
    display: block;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.cert-shine {
    position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255,255,255,.55) 50%,
        transparent 70%);
    transform: skewX(-18deg);
    z-index: 4;
    pointer-events: none;
    transition: left .9s cubic-bezier(.2,.8,.2,1);
}
.hero-cert:hover .cert-frame {
    transform: translateY(-6px) rotateX(2deg) rotateY(-3deg);
    border-color: var(--orange);
    box-shadow:
        0 40px 90px rgba(0,0,0,.6),
        0 0 0 1px var(--orange),
        0 0 90px rgba(241,144,24,.45),
        inset 0 0 0 4px rgba(241,144,24,.3);
}
.hero-cert:hover .cert-frame img {
    transform: scale(1.03);
}
.hero-cert:hover .cert-shine {
    left: 125%;
}

.cert-zoom-hint {
    position: absolute; bottom: 14px; right: 14px;
    z-index: 5;
    background: rgba(26,10,48,.85);
    backdrop-filter: blur(10px);
    color: var(--orange);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(241,144,24,.4);
    font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0; transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}
.cert-zoom-hint i { font-size: .85rem; }
.hero-cert:hover .cert-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

.cert-stamp {
    position: absolute; top: -18px; left: -18px;
    z-index: 6;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 900; text-align: center;
    box-shadow:
        0 12px 28px rgba(241,144,24,.55),
        0 0 0 4px rgba(255,255,255,.15),
        inset 0 0 0 2px rgba(255,255,255,.25);
    transform: rotate(-12deg);
    animation: stampSpin 18s linear infinite;
}
.cert-stamp i {
    font-size: 1.3rem; margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

@keyframes stampSpin {
    0%   { transform: rotate(-12deg); }
    100% { transform: rotate(348deg); }
}
@keyframes floatCert {
    0%,100% { translate: 0 0; }
    50%     { translate: 0 -10px; }
}

/* ===== Hero Brand Wall (tilted 3D scrolling logo wall) ===== */
.brand-wall {
    position: relative; z-index: 5;
    width: 100%; max-width: 540px;
    aspect-ratio: 1 / 1.04;
    margin: 0 auto;
    perspective: 1500px;
    overflow: hidden;
    border-radius: 26px;
    transform: translateZ(0); /* compositor layer to prevent flicker */
}
.brand-wall-aurora {
    position: absolute; inset: -12%;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 38% at 28% 24%, rgba(241,144,24,.32), transparent 70%),
        radial-gradient(44% 44% at 74% 72%, rgba(120,60,210,.36), transparent 72%),
        radial-gradient(50% 50% at 50% 50%, rgba(241,144,24,.08), transparent 75%);
    filter: blur(22px);
    /* Slow & subtle so it doesn't re-rasterize every frame and cause flicker */
    animation: auroraDrift 22s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes auroraDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
    100% { transform: translate3d(3%, 2%, 0)  scale(1.08);  }
}
.brand-wall-stage {
    position: absolute; inset: 0;
    z-index: 2;
    display: flex; gap: 12px;
    justify-content: center; align-items: center;
    padding: 0 6%;
    transform: rotateY(-22deg) rotateX(6deg) rotateZ(-2deg) translateZ(0);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.brand-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}
.brand-col-track {
    display: flex; flex-direction: column; gap: 12px;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Scroll duration scales with the number of cards so reading speed stays comfortable. */
.brand-col--a .brand-col-track { animation: wallScrollUp   95s linear infinite; }
.brand-col--b .brand-col-track { animation: wallScrollDown 82s linear infinite; }
@keyframes wallScrollUp   { from { transform: translate3d(0,0,0); }      to { transform: translate3d(0,-50%,0); } }
@keyframes wallScrollDown { from { transform: translate3d(0,-50%,0); }   to { transform: translate3d(0,0,0); } }
.brand-wall:hover .brand-col-track { animation-play-state: paused; }

.brand-card {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 5 / 4;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    padding: 8% 10%;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    border: 1px solid rgba(241,144,24,.22);
    box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    /* backdrop-filter removed: it triggers re-paint of every card on every aurora
       animation frame and is the main cause of the flicker. */
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.brand-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
    transition: transform .35s ease;
}
/* Recolor dark wordmark logo (Magazine) to white on the dark cards */
.brand-card img.brand-logo--white {
    filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
/* Wide / banner-shaped logos (aspect ratio > ~3:1) — shrink padding so they read */
.brand-card--wide { padding: 14% 6%; }
.brand-card--wide img { object-fit: contain; }
/* Tall / portrait logos — push padding to sides so they don't get squished */
.brand-card--tall { padding: 5% 16%; }

/* === Per-logo card backdrops ============================================= */
/* Use these to give the right contrast behind logos that don't read on the
   default purple-glass background. */

/* Soft, frosted white wash — for logos whose content is mostly DARK/black
   (e.g. dark navy, black silhouettes). Gives them a paper-card feel. */
.brand-card--light {
    background:
        linear-gradient(155deg, rgba(255,255,255,.92), rgba(245,242,255,.78));
    border-color: rgba(255,255,255,.55);
    box-shadow:
        0 14px 32px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.95),
        0 0 0 1px rgba(241,144,24,.12);
}
.brand-card--light .brand-card-shine {
    background: linear-gradient(110deg, transparent 30%, rgba(241,144,24,.22) 50%, transparent 70%);
}

/* Warm amber wash — for logos whose content is mostly WHITE / very light.
   Provides good contrast while staying inside the brand palette. */
.brand-card--amber {
    background:
        linear-gradient(155deg, rgba(241,144,24,.62), rgba(168,80,16,.48)),
        radial-gradient(120% 90% at 30% 20%, rgba(255,210,140,.35), transparent 70%);
    border-color: rgba(255,196,104,.6);
    box-shadow:
        0 14px 32px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,225,170,.85),
        0 0 0 1px rgba(241,144,24,.45);
}

/* Near-black wash — alternative dark backdrop for white logos that suit a
   moodier feel (kept as an option). */
.brand-card--dark {
    background:
        linear-gradient(155deg, rgba(8,4,18,.92), rgba(20,10,40,.78));
    border-color: rgba(120,60,210,.45);
    box-shadow:
        0 14px 32px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(241,144,24,.18);
}

/* When a card uses the light backdrop, drop the default drop-shadow on the
   image (it would create a dark halo on white). */
.brand-card--light img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.brand-card-shine {
    position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    transform: skewX(-16deg);
    pointer-events: none;
}
.brand-card:hover {
    border-color: var(--orange);
    box-shadow: 0 22px 52px rgba(241,144,24,.42), 0 0 0 1px rgba(241,144,24,.45);
    transform: scale(1.06);
}
.brand-card:hover img { transform: scale(1.05); }
.brand-card:hover .brand-card-shine { animation: cardShine .85s ease forwards; }
@keyframes cardShine { to { left: 150%; } }

@media (prefers-reduced-motion: reduce) {
    .brand-col-track, .brand-wall-aurora { animation: none !important; }
    .brand-wall-stage {
        -webkit-mask: none; mask: none;
        overflow-y: auto;
    }
}

/* ===== Hero Certificate Button (moved from centerpiece) ===== */
.hero-cert-btn {
    position: absolute; bottom: -98px; left: 50%;
    transform: translateX(-50%);
    z-index: 26;
    display: inline-flex; align-items: center; gap: 14px;
    max-width: min(92vw, 380px);
    padding: 10px 18px 10px 12px;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit; text-align: start;
    color: #fff;
    background: linear-gradient(135deg, rgba(46,20,90,.92), rgba(26,10,48,.96));
    border: 1px solid rgba(241,144,24,.45);
    box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(241,144,24,.18), inset 0 0 0 1px rgba(255,255,255,.04);
    transition: border-color .35s ease, box-shadow .35s ease;
    animation: badgeFloat 3.4s ease-in-out infinite;
}
.hero-cert-btn:hover {
    border-color: var(--orange);
    box-shadow: 0 24px 54px rgba(241,144,24,.42), 0 0 0 1px var(--orange);
}
.hero-cert-btn__thumb {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(241,144,24,.6);
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.hero-cert-btn__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cert-btn__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-cert-btn__title {
    font-weight: 900; font-size: .98rem; color: #fff;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.hero-cert-btn__title i { color: var(--orange); }
.hero-cert-btn__sub {
    font-size: .74rem; color: var(--muted); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-cert-btn__zoom {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--orange);
    background: rgba(241,144,24,.12);
    border: 1px solid rgba(241,144,24,.4);
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
.hero-cert-btn:hover .hero-cert-btn__zoom {
    background: var(--orange); color: #fff;
    transform: rotate(15deg) scale(1.08);
}

/* ===== Certificate Viewer (cinematic zoom) ===== */
.cert-viewer {
    position: fixed; inset: 0; z-index: 2200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,3,22,.0);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: background .55s ease, backdrop-filter .55s ease, opacity .35s ease;
    padding: 50px 24px;
}
.cert-viewer.active {
    background: rgba(8,3,22,.85);
    backdrop-filter: blur(18px);
    opacity: 1;
    pointer-events: auto;
}
.cert-viewer.active::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 50% 50%, rgba(241,144,24,.20), transparent 70%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(90,47,168,.30), transparent 60%);
    pointer-events: none;
    animation: certBgPulse 5s ease-in-out infinite;
}
@keyframes certBgPulse {
    0%,100% { opacity: .9; }
    50%     { opacity: 1;  }
}

.cert-viewer-stage {
    position: relative; z-index: 2;
    max-width: 92vw; max-height: 86vh;
    transform: scale(.4) translateY(40px) rotate(-4deg);
    opacity: 0;
    transition:
        transform .85s cubic-bezier(.16, 1, .3, 1),
        opacity .55s ease .05s;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cert-viewer.active .cert-viewer-stage {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
}
.cert-viewer-stage img {
    max-width: 100%; max-height: 70vh;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 16px;
    border: 5px solid rgba(241,144,24,.5);
    box-shadow:
        0 40px 100px rgba(0,0,0,.7),
        0 0 0 1px rgba(241,144,24,.5),
        0 0 120px rgba(241,144,24,.4);
}
.cert-viewer-rays {
    position: absolute; inset: -50px;
    z-index: -1;
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(241,144,24,.2) 20deg, transparent 40deg,
            transparent 80deg, rgba(241,144,24,.18) 100deg, transparent 120deg,
            transparent 160deg, rgba(241,144,24,.15) 180deg, transparent 200deg,
            transparent 240deg, rgba(241,144,24,.18) 260deg, transparent 280deg,
            transparent 320deg, rgba(241,144,24,.2) 340deg, transparent 360deg);
    filter: blur(40px);
    opacity: 0;
    animation: raysSpin 22s linear infinite;
    transition: opacity 1s ease .2s;
    border-radius: 50%;
}
.cert-viewer.active .cert-viewer-rays { opacity: .8; }
@keyframes raysSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.cert-viewer-info {
    text-align: center;
    color: var(--text-light);
    background: rgba(26,10,48,.55);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(241,144,24,.3);
    padding: 18px 26px;
    border-radius: 20px;
    max-width: 100%;
}
.cert-viewer-info h3 {
    font-size: 1.4rem; color: var(--orange); margin-bottom: 6px;
}
.cert-viewer-info p { color: var(--muted); font-size: .95rem; margin-bottom: 12px; }
.cert-viewer-meta {
    display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
    color: var(--text-light); font-size: .88rem; font-weight: 700;
}
.cert-viewer-meta i { color: var(--orange); margin-left: 6px; }
.cert-viewer-meta span {
    background: rgba(241,144,24,.12);
    border: 1px solid rgba(241,144,24,.3);
    padding: 6px 14px; border-radius: 999px;
}

.cert-viewer-close {
    position: absolute; top: 24px; left: 24px;
    z-index: 5;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(241,144,24,.4);
    background: rgba(26,10,48,.75);
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
    transform: scale(0) rotate(-180deg);
}
.cert-viewer.active .cert-viewer-close {
    transform: scale(1) rotate(0);
    transition: transform .55s cubic-bezier(.2,1.2,.4,1) .3s;
}
.cert-viewer-close:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 30px rgba(241,144,24,.6);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Founder CV viewer ===== */
.founder-cv-viewer {
    position: fixed;
    inset: 0;
    z-index: 2250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px 24px;
    background: rgba(8, 3, 22, 0);
    backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition: background 0.4s ease, backdrop-filter 0.4s ease, opacity 0.3s ease;
}
.founder-cv-viewer.active {
    background: rgba(8, 3, 22, 0.88);
    backdrop-filter: blur(14px);
    opacity: 1;
    pointer-events: auto;
}
.founder-cv-close {
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    inset-inline-start: auto;
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(241, 144, 24, 0.45);
    background: rgba(26, 10, 48, 0.85);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}
.founder-cv-close:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: rotate(90deg);
}
.founder-cv-panel {
    position: relative;
    z-index: 2;
    width: min(1120px, 100%);
    max-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(48, 26, 88, 0.98), rgba(18, 6, 36, 0.99));
    border: 1px solid rgba(241, 144, 24, 0.32);
    border-radius: 24px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
}
.founder-cv-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}
.founder-cv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    min-height: min(78vh, 720px);
    height: 100%;
}
.founder-cv-docs {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid rgba(241, 144, 24, 0.18);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(241, 144, 24, 0.06), transparent 55%),
        rgba(10, 4, 24, 0.35);
}
.founder-cv-docs-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding: 28px 20px 28px;
    scroll-padding-top: 28px;
    scroll-padding-bottom: 28px;
}
.founder-cv-docs-end-spacer {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 0;
    flex-shrink: 0;
}
.founder-cv-col-label {
    display: block;
    width: 100%;
    max-width: min(480px, 100%);
    align-self: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
    opacity: 0.92;
}
.founder-cv-hint {
    width: 100%;
    max-width: min(480px, 100%);
    align-self: center;
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.founder-cv-pdf {
    width: 100%;
    max-width: min(480px, 100%);
    min-height: 220px;
    height: 48vh;
    max-height: 420px;
    margin-inline: auto;
    margin-bottom: 16px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(241, 144, 24, 0.22);
}
.founder-cv-scans {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: min(480px, 100%);
    margin-inline: auto;
    margin-bottom: 0;
    padding: 28px 14px 28px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(241, 144, 24, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* معاينة أطول، مسافة متساوية فوق/تحت داخل الإطار؛ التكبير يعرض الصورة كاملة */
.founder-cv-scans img {
    display: block;
    width: min(440px, 90%);
    height: min(640px, 74vh);
    max-width: 100%;
    margin-inline: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: zoom-in;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(241, 144, 24, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    object-fit: cover;
    object-position: center center;
}
.founder-cv-scans img:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(241, 144, 24, 0.35);
}
.founder-cv-scans img:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}
.founder-cv-scans img:last-of-type {
    margin-bottom: 0;
}
.founder-cv-profile {
    min-height: 0;
    padding: 28px 22px 28px;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, rgba(241, 144, 24, 0.1), transparent 50%),
        linear-gradient(180deg, rgba(26, 10, 48, 0.5), rgba(14, 5, 28, 0.92));
}
.founder-cv-profile-card {
    max-width: min(420px, 100%);
    margin-inline: auto;
    text-align: center;
}
.founder-cv-photo-ring {
    width: 132px;
    height: 132px;
    margin: 0 auto 28px;
    padding: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), #7c3aed, var(--orange-dark));
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}
.founder-cv-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid rgba(14, 5, 28, 0.95);
    background: #1a0a30;
}
.founder-cv-photo-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #fff;
    background: linear-gradient(160deg, rgba(241, 144, 24, 0.35), rgba(26, 10, 48, 0.95));
    border: 3px solid rgba(14, 5, 28, 0.95);
}
.founder-cv-name {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 2.8vw, 1.65rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.02em;
}
.founder-cv-role {
    margin: 0 0 18px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--orange);
    line-height: 1.45;
}
.founder-cv-bio {
    margin: 0;
    padding: 18px 16px 20px;
    font-size: 0.94rem;
    line-height: 1.85;
    color: rgba(232, 228, 244, 0.92);
    text-align: center;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.founder-cv-docs-legend {
    width: 100%;
    margin-top: 22px;
    text-align: center;
}
.founder-cv-docs-legend .founder-cv-col-label {
    max-width: 100%;
    margin-bottom: 10px;
}
.founder-cv-docs-legend .founder-cv-hint {
    max-width: 100%;
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.9;
}
@media (max-width: 820px) {
    .founder-cv-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .founder-cv-docs {
        order: 2;
        max-height: 46vh;
        border-inline-end: none;
        border-top: 1px solid rgba(241, 144, 24, 0.18);
    }
    .founder-cv-docs-scroll {
        padding: 22px 16px 22px;
        scroll-padding-top: 22px;
        scroll-padding-bottom: 22px;
    }
    .founder-cv-docs-end-spacer {
        height: 0;
    }
    .founder-cv-scans {
        padding: 22px 12px 22px;
    }
    .founder-cv-scans img {
        width: min(268px, 88vw);
        height: min(520px, 52vh);
    }
    .founder-cv-profile {
        order: 1;
        padding: 22px 18px 18px;
    }
    .founder-cv-profile-card {
        max-width: min(360px, 100%);
    }
    .founder-cv-photo-ring {
        margin-bottom: 22px;
    }
    .founder-cv-pdf {
        height: 40vh;
        max-height: 360px;
        min-height: 180px;
    }
    .founder-cv-scans,
    .founder-cv-pdf,
    .founder-cv-col-label,
    .founder-cv-hint {
        max-width: min(360px, 92vw);
    }
}

.collage-badge {
    position: absolute; bottom: -90px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff; padding: 12px 24px; border-radius: 999px;
    font-weight: 800; font-size: .92rem; z-index: 25;
    box-shadow: 0 10px 28px rgba(241,144,24,.5);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 10px;
    border: 2px solid rgba(255,255,255,.18);
    animation: badgeFloat 3s ease-in-out infinite;
}
.collage-badge i { font-size: 1rem; }
@keyframes badgeFloat {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(-6px); }
}
.hero-stats {
    position: absolute; bottom: -10px; right: 0; left: 0;
    display: flex; justify-content: space-around; gap: 20px;
    z-index: 30;
}
.stat {
    text-align: center;
    background: rgba(26,10,48,.85);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(241,144,24,.25);
    border-radius: 16px; padding: 14px 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    min-width: 0;
}
.stat .lbl { white-space: nowrap; }
.stat:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 18px 36px rgba(241,144,24,.35);
}
.stat .num { font-size: 1.8rem; font-weight: 900; color: var(--orange); display: block; }
.stat .lbl { font-size: .85rem; color: var(--muted); }

/* ============ SECTION BASE ============ */
section.bk { padding: 100px 48px; position: relative; }
.container { max-width: 1280px; margin: 0 auto; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title .pre {
    color: var(--orange); font-weight: 700; font-size: 14px; letter-spacing: 4px;
    margin-bottom: 12px; display: inline-block;
}
.section-title h2 {
    font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; margin-bottom: 16px;
}
.section-title .line {
    width: 80px; height: 4px; background: linear-gradient(90deg, var(--orange), transparent);
    margin: 0 auto; border-radius: 2px;
}
.section-title p {
    color: var(--muted); max-width: 700px; margin: 20px auto 0; font-size: 1.05rem; line-height: 1.8;
}

/* ============ CLIENTS STRIP (infinite marquee) ============ */
.clients-strip {
    background: linear-gradient(180deg, #0c0518 0%, var(--purple-900) 100%);
    padding-bottom: 72px;
}
.clients-strip-title { margin-bottom: 36px; }
.clients-marquee-shell {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 8px 0 28px;
}
.clients-marquee-edge {
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(48px, 8vw, 120px);
    z-index: 3;
    pointer-events: none;
}
.clients-marquee-edge--start {
    right: 0;
    background: linear-gradient(270deg, #0c0518 0%, transparent 100%);
}
.clients-marquee-edge--end {
    left: 0;
    background: linear-gradient(90deg, #0c0518 0%, transparent 100%);
}
.clients-marquee-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    cursor: grab;
    touch-action: pan-x;
    scroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(241, 144, 24, 0.45) rgba(255, 255, 255, 0.06);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients-marquee-viewport::-webkit-scrollbar {
    height: 7px;
}
.clients-marquee-viewport::-webkit-scrollbar-thumb {
    background: rgba(241, 144, 24, 0.45);
    border-radius: 99px;
}
.clients-marquee-viewport::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}
.clients-marquee-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.clients-marquee-inner {
    display: flex;
    width: max-content;
    will-change: scroll-position;
}
@media (prefers-reduced-motion: reduce) {
    .clients-marquee-viewport {
        cursor: default;
    }
}
.clients-marquee-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.75rem);
    padding: 10px clamp(1rem, 3vw, 2.5rem);
    flex-shrink: 0;
}
.clients-marquee-item {
    position: relative;
    flex: 0 0 auto;
    width: clamp(140px, 16vw, 200px);
    height: clamp(72px, 9vw, 100px);
    padding: 12px 18px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s, background .3s;
    overflow: hidden;
}
.clients-marquee-item-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.2) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}
.clients-marquee-item:hover .clients-marquee-item-shine,
.clients-marquee-item:focus-visible .clients-marquee-item-shine {
    transform: translateX(120%);
}
.clients-marquee-item:hover,
.clients-marquee-item:focus-visible {
    transform: translateY(-5px) scale(1.04);
    border-color: rgba(241,144,24,.55);
    background: rgba(241,144,24,.1);
    box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(241,144,24,.2);
    outline: none;
}
.clients-marquee-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
    transition: filter .3s, transform .35s;
}
.clients-marquee-item:hover img {
    filter: drop-shadow(0 6px 18px rgba(241,144,24,.35));
    transform: scale(1.03);
}

/* White wordmark overlay (Magazine + DOT) */
.clients-marquee-imgbox {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.clients-marquee-item--wordbar {
    padding: 10px 14px 8px;
}
.clients-marquee-wordbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 6px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: none;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: #fff;
    font-weight: 800;
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
}
.clients-marquee-wordbar-l1,
.clients-marquee-wordbar-l2 {
    text-shadow:
        0 0 8px rgba(0,0,0,.9),
        0 1px 3px rgba(0,0,0,.95),
        0 2px 14px rgba(0,0,0,.75);
}
.clients-marquee-wordbar-l1 {
    font-size: clamp(0.55rem, 1.45vw, 0.74rem);
    letter-spacing: 0.16em;
    color: #fff;
}
.clients-marquee-wordbar-l2 {
    font-size: clamp(0.44rem, 1.15vw, 0.58rem);
    letter-spacing: 0.28em;
    margin-top: 3px;
    font-weight: 700;
    color: #fff;
    opacity: .98;
}
.clients-marquee-wordbar--dot .clients-marquee-wordbar-l1 {
    font-size: clamp(0.72rem, 1.9vw, 0.98rem);
    letter-spacing: 0.2em;
    font-weight: 900;
}
.clients-marquee-wordbar--dot .clients-marquee-wordbar-l2 {
    font-size: clamp(0.4rem, 1.05vw, 0.52rem);
    letter-spacing: 0.48em;
    margin-top: 4px;
}

/* Client detail in modal */
.modal-client-layout {
    display: grid;
    grid-template-columns: minmax(0, 220px) 1fr;
    gap: 28px;
    align-items: start;
}
.modal-client-logo-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(241,144,24,.25);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}
.modal-client-logo-card img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}
.modal-client-logo-inner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-client-logo-card--wordbar img {
    max-height: 100px;
}
.modal-client-wordbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: #fff;
    font-weight: 800;
    text-align: center;
    line-height: 1.1;
    pointer-events: none;
}
.modal-client-wordbar-l1,
.modal-client-wordbar-l2 {
    text-shadow:
        0 0 10px rgba(0,0,0,.9),
        0 1px 4px rgba(0,0,0,.95),
        0 2px 16px rgba(0,0,0,.8);
}
.modal-client-wordbar-l1 {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    color: #fff;
}
.modal-client-wordbar-l2 {
    font-size: 0.78rem;
    letter-spacing: 0.26em;
    margin-top: 4px;
    font-weight: 700;
    color: #fff;
    opacity: .98;
}
.modal-client-wordbar--dot .modal-client-wordbar-l1 {
    font-size: 1.35rem;
    letter-spacing: 0.18em;
    font-weight: 900;
}
.modal-client-wordbar--dot .modal-client-wordbar-l2 {
    font-size: 0.65rem;
    letter-spacing: 0.45em;
    margin-top: 6px;
}
.modal-client-detail {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.9;
    margin: 0;
}
@media (max-width: 720px) {
    .modal-client-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .modal-client-logo-card { margin: 0 auto; max-width: 260px; }
}

/* ============ ABOUT ============ */
.about { background: linear-gradient(180deg, var(--purple-900), var(--purple-800)); }
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.about-text p { color: var(--muted); line-height: 2; margin-bottom: 18px; font-size: 1.05rem; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; }
.value-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px; padding: 20px; transition: all .3s;
}
.value-card:hover { border-color: var(--orange); transform: translateY(-4px); }
.value-card i { color: var(--orange); font-size: 22px; margin-bottom: 10px; }
.value-card h4 { margin-bottom: 6px; font-size: 1.1rem; }
.value-card p { color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 0; }

.vm-box {
    background: linear-gradient(135deg, rgba(241,144,24,.08), rgba(90,47,168,.1));
    border: 1px solid rgba(241,144,24,.2); border-radius: 20px; padding: 30px; margin-bottom: 20px;
    position: relative; overflow: hidden;
}
.vm-box::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--orange), transparent);
}
.vm-box h3 { color: var(--orange); margin-bottom: 12px; font-size: 1.3rem; }
.vm-box p { color: var(--text-light); line-height: 1.9; }

.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.founder-card {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px; padding: 24px; text-align: center; transition: all .4s;
}
.founder-card--cv {
    cursor: pointer;
    user-select: none;
}
.founder-card--cv:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}
.founder-card:hover { transform: translateY(-8px); border-color: var(--orange); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
.founder-avatar {
    width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--orange), var(--purple-500));
    display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff;
    border: 3px solid rgba(241,144,24,.3);
}
.founder-card h4 {
    font-size: 1.1rem;
    margin: 0 0 4px;
    font-weight: 700;
    line-height: 1.35;
    transition: color .2s ease;
}
.founder-card--cv:hover h4,
.founder-card--cv:focus-visible h4 {
    color: var(--orange);
}
.founder-card span { color: var(--orange); font-size: .85rem; font-weight: 600; }

/* ============ ABOUT — IRAQ WORK MAP ============ */
.about-grid--map { align-items: stretch; grid-template-columns: 1.05fr .95fr; }
.about-map { display: flex; }
.iraq-map {
    position: relative; width: 100%; margin: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(90,47,168,.22), rgba(20,7,42,.6) 70%);
    border: 1px solid rgba(241,144,24,.22); border-radius: 26px;
    padding: 26px 24px 22px; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
}
.iraq-map::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(1px 1px at 20% 35%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 72% 22%, rgba(255,255,255,.35), transparent),
        radial-gradient(1.5px 1.5px at 45% 60%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.3), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.3), transparent);
    opacity: .5;
}
.iraq-map__head,
.iraq-map__stage,
.iraq-map__legend {
    position: relative;
    z-index: 2;
}
.iraq-map__head h3 { color: var(--orange); font-size: 1.25rem; margin: 0 0 8px; }
.iraq-map__head h3 i { margin-inline-end: 8px; }
.iraq-map__head p { color: var(--muted); font-size: .95rem; line-height: 1.8; margin: 0 0 6px; }
.iraq-map__stage {
    position: relative; flex: 1; min-height: 420px; margin-top: 16px;
    display: flex; align-items: center; justify-content: flex-start;
    flex-direction: column;
}
.iraq-map__canvas {
    position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto;
    overflow: visible; border-radius: 22px;
    background: transparent;
    box-shadow: none;
    animation: iraqFloat 9s ease-in-out infinite;
}
.iraq-map__photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    filter: saturate(1.16) contrast(1.1) brightness(1.06) drop-shadow(0 18px 34px rgba(0,0,0,.32)) drop-shadow(0 0 18px rgba(241,144,24,.28));
    transform: scale(1.01);
    z-index: 1;
}
.iraq-map__canvas::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: radial-gradient(circle at 58% 52%, rgba(255,196,104,.10), transparent 18%);
    box-shadow: none;
}
.iraq-map__halo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 82%; height: 82%; border-radius: 50%;
    background: radial-gradient(circle, rgba(241,144,24,.22), transparent 65%);
    filter: blur(26px); pointer-events: none; z-index: 0;
}
.iraq-map__svg {
    position: relative; width: 100%; height: 100%;
    overflow: visible; z-index: 1;
    filter: saturate(1.12) contrast(1.08);
}
@keyframes iraqFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.iraq-map__night {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        radial-gradient(ellipse at 48% 30%, rgba(83,158,255,.11), transparent 24%),
        radial-gradient(ellipse at 58% 52%, rgba(241,144,24,.08), transparent 22%),
        linear-gradient(132deg, transparent 29%, rgba(241,144,24,.12) 30%, transparent 31%),
        linear-gradient(58deg, transparent 38%, rgba(95,169,255,.10) 39%, transparent 40%),
        linear-gradient(98deg, transparent 62%, rgba(241,144,24,.10) 63%, transparent 64%);
    mix-blend-mode: screen;
    opacity: .95;
    animation: nightBreath 5.5s ease-in-out infinite;
}
.iraq-map__night::before {
    content: ''; position: absolute; inset: 8% 10% 6% 8%;
    background:
        radial-gradient(1px 1px at 43% 14%, rgba(255,229,179,.95), transparent 180%),
        radial-gradient(1px 1px at 53% 15%, rgba(255,229,179,.88), transparent 180%),
        radial-gradient(1px 1px at 58% 23%, rgba(255,229,179,.95), transparent 180%),
        radial-gradient(1px 1px at 68% 22%, rgba(255,229,179,.8), transparent 180%),
        radial-gradient(1px 1px at 56% 49%, rgba(255,229,179,.9), transparent 180%),
        radial-gradient(1px 1px at 57% 65%, rgba(255,229,179,.86), transparent 180%),
        radial-gradient(1px 1px at 91% 83%, rgba(255,229,179,.92), transparent 180%);
    filter: drop-shadow(0 0 6px rgba(241,144,24,.85));
    opacity: .75;
}
.iraq-map__night::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(112deg, transparent 47%, rgba(241,144,24,.12) 47.4%, transparent 48.4%),
        linear-gradient(78deg, transparent 52%, rgba(255,210,143,.10) 52.35%, transparent 53.15%),
        linear-gradient(151deg, transparent 39%, rgba(89,171,255,.10) 39.35%, transparent 40.15%);
    opacity: .42;
    filter: blur(.4px);
}
@keyframes nightBreath {
    0%, 100% { opacity: .82; }
    50% { opacity: 1; }
}
.city-light {
    position: absolute; transform: translate(-50%, -50%) scale(var(--s, 1));
    width: 48px; height: 48px; border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,246,219,1) 0 4%, rgba(255,189,89,.92) 5% 10%, rgba(241,144,24,.35) 22%, transparent 62%),
        radial-gradient(circle at 30% 60%, rgba(118,191,255,.35), transparent 38%);
    filter: blur(.15px) drop-shadow(0 0 12px rgba(241,144,24,.72));
    opacity: .78;
    animation: cityTwinkle 3.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.city-light::before,
.city-light::after {
    content: ''; position: absolute; inset: 24% 20%; border-radius: 999px;
    background:
        radial-gradient(circle at 10% 45%, rgba(255,241,206,.98) 0 2px, transparent 2.6px),
        radial-gradient(circle at 28% 26%, rgba(255,202,112,.9) 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 42% 68%, rgba(255,236,192,.86) 0 1.8px, transparent 2.4px),
        radial-gradient(circle at 66% 36%, rgba(255,198,94,.82) 0 1.6px, transparent 2.2px),
        radial-gradient(circle at 82% 62%, rgba(134,199,255,.72) 0 1.5px, transparent 2.1px);
}
.city-light::after {
    inset: 34% 14%;
    transform: rotate(28deg);
    opacity: .65;
    filter: blur(.2px);
}
@keyframes cityTwinkle {
    0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * .96)); }
    45% { opacity: .95; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 1.08)); }
}
.iraq-map__pins { position: absolute; inset: 0; z-index: 5; }

.work-pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 18px; height: 18px; padding: 0; border: 0; background: transparent;
    cursor: pointer; z-index: 2;
}
.work-pin__dot {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd9a3, var(--orange) 60%, var(--orange-dark));
    box-shadow: 0 0 8px rgba(241,144,24,.95), 0 0 18px rgba(241,144,24,.65);
    z-index: 2;
}
.work-pin__pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 14px; height: 14px; border-radius: 50%;
    background: rgba(241,144,24,.45); z-index: 1;
    animation: workPulse 2.4s ease-out infinite;
}
@keyframes workPulse {
    0% { transform: translate(-50%, -50%) scale(.6); opacity: .9; }
    70% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
    100% { opacity: 0; }
}
.work-pin--hq { width: 24px; height: 24px; z-index: 4; }
.work-pin--hq .work-pin__dot {
    width: 12px; height: 12px;
    background: radial-gradient(circle at 35% 30%, #fff, #ffcf8a 55%, var(--orange));
    box-shadow: 0 0 14px rgba(255,255,255,.9), 0 0 26px rgba(241,144,24,.8);
}
.work-pin--hq .work-pin__pulse { width: 18px; height: 18px; background: rgba(255,255,255,.5); }
.work-pin--branch { z-index: 3; }
.work-pin--branch .work-pin__dot {
    background: radial-gradient(circle at 35% 30%, #ffe9c9, #f6b04a 60%, var(--orange-dark));
}
.work-pin__label {
    position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(6px);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    white-space: nowrap; padding: 5px 11px; border-radius: 10px;
    background: rgba(20,7,42,.92); border: 1px solid rgba(241,144,24,.4);
    color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.2;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease;
    pointer-events: none; z-index: 5;
}
.work-pin__label small { color: var(--orange); font-size: .62rem; font-weight: 600; letter-spacing: .03em; }
.work-pin__label::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: rgba(241,144,24,.4);
}
.work-pin:hover .work-pin__label,
.work-pin:focus-visible .work-pin__label {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.work-pin:focus-visible { outline: none; }
.work-pin:focus-visible .work-pin__dot { box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 0 16px rgba(241,144,24,.9); }
/* Keep labels on hover/focus so the supplied night map remains visible. */

.iraq-map__legend {
    display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
    color: var(--muted); font-size: .82rem;
}
.iraq-map__legend span { display: inline-flex; align-items: center; gap: 7px; }
.work-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.work-dot--hq { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.work-dot--branch { background: #f6b04a; box-shadow: 0 0 8px rgba(246,176,74,.7); }
.work-dot--site { background: var(--orange); box-shadow: 0 0 8px rgba(241,144,24,.7); }

@media (max-width: 900px) {
    .about-grid--map { grid-template-columns: 1fr; }
    .iraq-map__stage { min-height: 320px; }
}

/* ============ CARDS (shared by Dept + Services) ============ */
.departments { background: var(--purple-800); }
.dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.dept-card {
    position: relative; background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 32px 24px;
    cursor: pointer; overflow: hidden; transition: all .4s; text-align: center;
}
.dept-card::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(241,144,24,.15), transparent 60%);
    opacity: 0; transition: opacity .4s;
}
.dept-card:hover { transform: translateY(-10px); border-color: var(--orange); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.dept-card:hover::before { opacity: 1; }
.dept-icon {
    width: 80px; height: 80px; border-radius: 20px; margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff;
    position: relative; z-index: 1;
    box-shadow: 0 10px 30px rgba(241,144,24,.3);
}
/* Department icon variant: brand logo instead of font icon.
   No box — just the logo itself, smaller and slightly transparent. */
.dept-icon--logo {
    width: auto; height: 62px;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: .85;
    transition: transform .35s ease, opacity .35s ease;
}
.dept-icon--logo img {
    width: auto; height: 100%; max-width: 160px;
    object-fit: contain; display: block;
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.45));
}
/* Recolor dark wordmark logos to white so they read on the dark cards */
.dept-icon--logo img.dept-logo--white {
    filter: brightness(0) invert(1) drop-shadow(0 4px 9px rgba(0,0,0,.45));
}
.dept-card:hover .dept-icon--logo {
    transform: translateY(-3px) scale(1.06);
    opacity: 1;
}

/* Department "top clients" chips (inside modal) */
.dept-clients {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 4px 0 8px;
}
.dept-client-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: .9rem; font-weight: 600;
    color: var(--text-light, #fff);
    background: rgba(241,144,24,.10);
    border: 1px solid rgba(241,144,24,.3);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.dept-client-chip i { color: var(--orange); font-size: .82rem; }
.dept-client-chip:hover {
    transform: translateY(-2px);
    background: rgba(241,144,24,.18);
    border-color: var(--orange);
}
.dept-card h3 { font-size: 1.25rem; margin-bottom: 10px; position: relative; z-index: 1; }
.dept-card p { color: var(--muted); font-size: .92rem; line-height: 1.7; margin-bottom: 16px; position: relative; z-index: 1; }
.dept-card .explore {
    display: inline-flex; align-items: center; gap: 8px; color: var(--orange);
    font-weight: 700; font-size: .9rem; position: relative; z-index: 1;
}

/* ============ MODAL ============ */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(10,4,28,.85); backdrop-filter: blur(8px);
    display: none; align-items: flex-start; justify-content: center; padding: 40px 20px;
    overflow-y: auto;
}
.modal-backdrop.active { display: flex; animation: fadeIn .3s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box {
    background: linear-gradient(180deg, var(--purple-700), var(--purple-900));
    border: 1px solid rgba(241,144,24,.25); border-radius: 24px;
    max-width: 1100px; width: 100%; position: relative;
    overflow: hidden; animation: slideUp .5s;
}
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-close {
    position: absolute; top: 20px; left: 20px; z-index: 5;
    width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,.5); color: #fff; font-size: 18px;
    transition: all .3s;
}
.modal-close:hover { background: var(--orange); transform: rotate(90deg); }
.modal-header {
    padding: 40px 50px 30px;
    background: linear-gradient(135deg, rgba(241,144,24,.15), transparent);
    border-bottom: 1px solid rgba(241,144,24,.2);
    display: flex; gap: 20px; align-items: center;
}
.modal-header .dept-icon { margin: 0; width: 70px; height: 70px; font-size: 28px; border-radius: 16px; flex-shrink: 0; }
.modal-header .dept-icon--logo { width: auto; height: 54px; padding: 0; }
.modal-header h2 { font-size: 2rem; margin-bottom: 6px; }
.modal-header p { color: var(--muted); font-size: 1rem; line-height: 1.8; }
.modal-body { padding: 30px 50px 50px; }
.modal-body h3 {
    color: var(--orange); margin: 30px 0 16px; font-size: 1.25rem;
    padding-right: 14px; border-right: 3px solid var(--orange);
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body .badges { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.modal-body .badge {
    background: rgba(241,144,24,.12); border: 1px solid rgba(241,144,24,.35);
    padding: 10px 20px; border-radius: 999px;
    color: var(--orange); font-weight: 700; font-size: .9rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.modal-body ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 20px; }
.modal-body ul li {
    background: rgba(255,255,255,.04); padding: 10px 16px; border-radius: 10px;
    border-right: 3px solid var(--orange); font-size: .95rem;
    transition: all .3s;
}
.modal-body ul li:hover { background: rgba(241,144,24,.1); transform: translateX(-4px); }
.modal-body .modal-dept-services-intro {
    color: var(--muted); font-size: .95rem; margin: -8px 0 16px; line-height: 1.7;
}
.modal-body .modal-dept-service-item { cursor: pointer; outline: none; }
.modal-body .modal-dept-service-item:focus-visible {
    box-shadow: 0 0 0 2px var(--orange);
}
.modal-body .modal-dept-svc-short {
    display: block; margin-top: 6px; color: var(--muted);
    font-size: .88rem; font-weight: 400; line-height: 1.5;
}

/* ----- Event dept: interactive showcase (إيفنتات بصمة كروب) ----- */
.modal-body .event-showcase {
    position: relative;
    margin: 0 0 28px;
    padding: 22px 18px 18px;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(255,255,255,.07) 0%, rgba(26,10,48,.5) 45%, rgba(241,144,24,.08) 100%);
    border: 1px solid rgba(241,144,24,.28);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    overflow: hidden;
}
.modal-body .event-showcase-glow {
    position: absolute;
    inset: -45% -15% auto;
    height: 120%;
    background:
        radial-gradient(ellipse 70% 50% at 20% 30%, rgba(241,144,24,.28), transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 70%, rgba(160,90,220,.15), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.modal-body .event-showcase-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-left: 4px;
}
.modal-body .event-showcase-head-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--orange), #c45a00);
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 8px 28px rgba(241,144,24,.45);
    animation: eventHeadPulse 2.8s ease-in-out infinite;
}
@keyframes eventHeadPulse {
    0%, 100% { box-shadow: 0 8px 28px rgba(241,144,24,.45); transform: scale(1); }
    50% { box-shadow: 0 12px 36px rgba(241,144,24,.65); transform: scale(1.04); }
}
.modal-body .event-showcase-head-text strong {
    display: block;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: .02em;
    margin-bottom: 4px;
}
.modal-body .event-showcase-head-text span {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.55;
}
.modal-body .event-showcase-scroller {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(241,144,24,.5) rgba(255,255,255,.06);
}
.modal-body .event-showcase-scroller::-webkit-scrollbar { height: 6px; }
.modal-body .event-showcase-scroller::-webkit-scrollbar-thumb {
    background: rgba(241,144,24,.45);
    border-radius: 99px;
}
.modal-body .event-showcase-card {
    position: relative;
    flex: 0 0 min(248px, 82vw);
    scroll-snap-align: start;
    text-align: right;
    cursor: pointer;
    padding: 0;
    border-radius: 16px;
    background: rgba(10,4,24,.55);
    border: 1px solid rgba(255,255,255,.1);
    overflow: hidden;
    color: inherit;
    font: inherit;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
}
.modal-body .event-showcase-card:hover,
.modal-body .event-showcase-card:focus-visible {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(241,144,24,.55);
    outline: none;
}
.modal-body .event-showshine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity .3s;
}
.modal-body .event-showcase-card:hover .event-showshine {
    opacity: 1;
    animation: eventShine 1.1s ease forwards;
}
@keyframes eventShine {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.modal-body .event-showcase-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.modal-body .event-showcase-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.modal-body .event-showcase-card:hover .event-showcase-cover img {
    transform: scale(1.08);
}
.modal-body .event-showcase-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(0,0,0,.55);
    color: #fff;
    backdrop-filter: blur(6px);
}
.modal-body .event-showcase-body {
    padding: 12px 14px 14px;
}
.modal-body .event-showcase-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 6px;
}
.modal-body .event-showcase-body h4 {
    margin: 0 0 8px;
    font-size: .98rem;
    line-height: 1.45;
    color: #fff;
}
.modal-body .event-showcase-body p {
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px;
}
.modal-gallery img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1); cursor: zoom-in;
    transition: all .4s;
}
.modal-gallery img:hover { transform: scale(1.03); border-color: var(--orange); }

/* ============ TEAM ============ */
.team { background: var(--purple-900); position: relative; }
.team-photo {
    max-width: 950px; margin: 0 auto; border-radius: 24px; overflow: hidden;
    border: 1px solid rgba(241,144,24,.2); box-shadow: 0 30px 80px rgba(0,0,0,.5);
    position: relative;
}
.team-photo img { width: 100%; display: block; }
.team-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(26,10,48,.85));
    pointer-events: none;
}
.team-caption {
    position: absolute; bottom: 30px; right: 30px; left: 30px; z-index: 2;
    text-align: center; color: #fff;
}
.team-caption h3 { font-size: 1.5rem; margin-bottom: 6px; }
.team-caption p { color: var(--muted); }
.team-meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px; max-width: 950px; margin: 40px auto 0;
}
.team-meta .m-card {
    text-align: center; padding: 24px;
    background: rgba(255,255,255,.04); border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
}
.team-meta .m-card .n { color: var(--orange); font-size: 2rem; font-weight: 900; }
.team-meta .m-card .l { color: var(--muted); font-size: .9rem; }

/* ============ CONTACT SECTION ============ */
.contact-section {
    background:
        linear-gradient(180deg, var(--purple-900) 0%, #14072a 100%);
    position: relative; overflow: hidden;
}
.contact-blob {
    position: absolute; border-radius: 50%; filter: blur(90px);
    pointer-events: none; z-index: 0;
}
.contact-blob.blob-1 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(241,144,24,.35), transparent 70%);
    top: -120px; right: -100px;
    animation: blobFloat1 14s ease-in-out infinite;
}
.contact-blob.blob-2 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(90,47,168,.45), transparent 70%);
    bottom: -180px; left: -140px;
    animation: blobFloat2 16s ease-in-out infinite;
}
@keyframes blobFloat1 {
    0%,100% { transform: translate(0,0) scale(1) }
    50%     { transform: translate(-40px,30px) scale(1.1) }
}
@keyframes blobFloat2 {
    0%,100% { transform: translate(0,0) scale(1) }
    50%     { transform: translate(40px,-30px) scale(1.05) }
}

.contact-section .container { position: relative; z-index: 2; }

.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 36px; align-items: stretch;
    margin-top: 20px;
}

/* ----- MAP SIDE (dual branch, horizontal scroll) ----- */
.contact-map-wrap {
    position: relative;
    min-height: 600px;
    border-radius: 26px; overflow: hidden;
    border: 1px solid rgba(241,144,24,.3);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(241,144,24,.05);
    background: #0d0518;
    display: flex;
    flex-direction: column;
}
.contact-maps-tabs {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    z-index: 1200;
    background: linear-gradient(180deg, rgba(26,10,48,.97), rgba(26,10,48,.88));
    border-bottom: 1px solid rgba(241,144,24,.22);
    flex-shrink: 0;
}
.contact-map-tab {
    flex: 1;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-family: 'Cairo', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.contact-map-tab i { color: var(--orange); opacity: .75; }
.contact-map-tab:hover {
    color: #fff;
    border-color: rgba(241,144,24,.35);
    background: rgba(241,144,24,.08);
}
.contact-map-tab.is-active {
    color: #fff;
    border-color: rgba(241,144,24,.55);
    background: linear-gradient(135deg, rgba(241,144,24,.22), rgba(241,144,24,.06));
    box-shadow: 0 0 0 1px rgba(241,144,24,.2), 0 8px 24px rgba(0,0,0,.35);
}
.contact-map-tab.is-active i { opacity: 1; }
.contact-maps-rail {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(241,144,24,.45) rgba(255,255,255,.06);
}
.contact-maps-rail::-webkit-scrollbar { height: 8px; }
.contact-maps-rail::-webkit-scrollbar-thumb {
    background: rgba(241,144,24,.45);
    border-radius: 99px;
}
.contact-map-panel {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 520px;
    background: #f4f6f8;
}
.contact-map-panel .contact-map {
    width: 100%;
    height: 100%;
    min-height: 520px;
}
.map-card p a {
    color: #e8e4f4;
    text-decoration: none;
    border-bottom: 1px dashed rgba(241,144,24,.45);
    transition: color .2s, border-color .2s;
}
.map-card p a:hover {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* Leaflet light adjustments */
.leaflet-container {
    background: #f4f6f8 !important;
    font-family: 'Cairo', sans-serif !important;
}
.leaflet-control-attribution {
    background: rgba(255,255,255,.92) !important;
    color: #555 !important;
    font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--orange-dark) !important; }
.leaflet-bar a {
    background: #fff !important;
    color: var(--purple-900) !important;
    border-color: rgba(241,144,24,.3) !important;
}
.leaflet-bar a:hover {
    background: var(--orange) !important; color: #fff !important;
}

/* Custom pulsing marker */
.bassma-marker {
    position: relative; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
}
.bassma-marker::before, .bassma-marker::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 16px; height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(241,144,24,.55);
    animation: markerPulse 2.4s ease-out infinite;
}
.bassma-marker::after { animation-delay: 1.2s; }
.bassma-marker .marker-core {
    position: relative; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 8px 22px rgba(241,144,24,.6);
}
@keyframes markerPulse {
    0%   { width: 16px; height: 16px; opacity: .8; }
    100% { width: 90px; height: 90px; opacity: 0; }
}

/* Floating glass card on map */
.map-card {
    position: absolute; bottom: 22px; right: 22px; left: 22px; z-index: 1100;
    display: flex; gap: 16px; align-items: center;
    padding: 18px 20px;
    background: rgba(26,10,48,.92);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(241,144,24,.45);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(241,144,24,.1), 0 0 22px rgba(241,144,24,.18);
    animation: cardSlide .8s ease .3s both;
}
@keyframes cardSlide { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) } }
.map-card-icon {
    width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff; font-size: 22px;
    box-shadow: 0 8px 22px rgba(241,144,24,.5);
}
.map-card-body { flex: 1; min-width: 0; }
.map-card-pre { color: var(--orange); font-weight: 700; font-size: .75rem; letter-spacing: 2px; }
.map-card h4 { margin: 4px 0 8px; font-size: 1.1rem; }
.map-card p { color: var(--muted); font-size: .85rem; margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.map-card p i { color: var(--orange); width: 14px; }

/* Live indicator */
.map-live {
    position: absolute; top: 18px; left: 18px; z-index: 1100;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(26,10,48,.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(38,194,129,.45);
    border-radius: 999px;
    font-size: .8rem; color: #c9f5dc; font-weight: 600;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.live-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #26c281;
    box-shadow: 0 0 0 0 rgba(38,194,129,.7);
    animation: liveDot 1.6s ease-out infinite;
}
@keyframes liveDot {
    0%   { box-shadow: 0 0 0 0 rgba(38,194,129,.6); }
    100% { box-shadow: 0 0 0 12px rgba(38,194,129,0); }
}

/* ----- FORM SIDE ----- */
.contact-form {
    position: relative;
    padding: 36px 32px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
        radial-gradient(circle at top right, rgba(241,144,24,.08), transparent 50%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    overflow: hidden;
}
.contact-form::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
    animation: formTopShimmer 4s linear infinite;
}
@keyframes formTopShimmer {
    0%   { background-position: -200% 0 }
    100% { background-position: 200% 0 }
}
.form-header { margin-bottom: 26px; }
.form-pre { color: var(--orange); font-weight: 700; font-size: .8rem; letter-spacing: 3px; }
.form-header h3 { font-size: 1.6rem; margin-top: 6px; }
.form-header h3 span { color: var(--orange); }

.form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

.form-group {
    position: relative; margin-bottom: 22px;
}
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: transparent;
    border: none; outline: none;
    border-bottom: 1.5px solid rgba(255,255,255,.18);
    color: var(--text-light); font-family: 'Cairo', sans-serif;
    font-size: 1rem; padding: 14px 38px 10px 8px;
    transition: border-color .3s ease;
}
.form-group textarea { resize: vertical; min-height: 110px; padding-top: 18px; }
.form-group select {
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.form-group select option {
    background: var(--purple-800); color: var(--text-light);
}

.form-group label {
    position: absolute; right: 38px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted); pointer-events: none;
    font-size: 1rem; font-weight: 500;
    transition: all .25s ease;
}
.form-group-area label { top: 22px; transform: none; }

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -2px; right: 32px;
    font-size: .75rem; color: var(--orange);
    transform: none;
    letter-spacing: 1px; font-weight: 700;
}

.form-ico {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: .95rem;
    transition: color .3s, transform .3s;
}
.form-group-area .form-ico { top: 22px; transform: none; }

.form-group input:focus ~ .form-ico,
.form-group textarea:focus ~ .form-ico,
.form-group select:focus ~ .form-ico { color: var(--orange); }

.form-line {
    position: absolute; bottom: 0; right: 50%; left: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--orange), var(--orange-soft));
    transition: right .35s ease, left .35s ease;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(241,144,24,.7);
}
.form-group input:focus ~ .form-line,
.form-group textarea:focus ~ .form-line,
.form-group select:focus ~ .form-line { right: 0; left: 0; }

/* Submit button — fingerprint scan effect */
.form-submit {
    position: relative; width: 100%; padding: 18px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff; border: none; border-radius: 14px;
    font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.05rem;
    cursor: pointer; overflow: hidden;
    box-shadow: 0 12px 30px rgba(241,144,24,.45);
    transition: transform .35s ease, box-shadow .35s ease;
    margin-top: 6px;
}
.form-submit:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(241,144,24,.6); }
.form-submit::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s ease;
}
.form-submit:hover::after { transform: translateX(100%); }

.form-submit .btn-default,
.form-submit .btn-loading,
.form-submit .btn-success {
    display: inline-flex; align-items: center; gap: 10px;
    transition: opacity .3s ease, transform .3s ease;
}
.form-submit .btn-loading,
.form-submit .btn-success {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(8px); pointer-events: none;
}
.form-submit.is-loading .btn-default { opacity: 0; transform: translateY(-8px); }
.form-submit.is-loading .btn-loading { opacity: 1; transform: translateY(0); }
.form-submit.is-success { background: linear-gradient(135deg, #1ea66b, #0f7a4d); }
.form-submit.is-success .btn-default,
.form-submit.is-success .btn-loading { opacity: 0; }
.form-submit.is-success .btn-success { opacity: 1; transform: translateY(0); }

.form-note {
    margin-top: 16px; color: var(--muted); font-size: .85rem;
    display: flex; align-items: center; gap: 8px;
}
.form-note i { color: var(--orange); }

/* Form invalid feedback */
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid select {
    border-bottom-color: #e25b5b;
}
.form-group.invalid .form-ico { color: #e25b5b; }

/* Fingerprint reveal overlay (legendary submit confirmation) */
.print-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(10,4,28,.88); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 20px; color: #fff;
}
.print-overlay.show { display: flex; animation: fadeIn .4s; }
.print-overlay .fp-circle {
    width: 160px; height: 160px; border-radius: 50%;
    border: 3px solid rgba(241,144,24,.4);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(241,144,24,.18), transparent 70%);
}
.print-overlay .fp-circle i {
    font-size: 88px; color: var(--orange);
    filter: drop-shadow(0 0 20px rgba(241,144,24,.7));
    animation: fpScan 1.2s ease-in-out;
}
@keyframes fpScan {
    0%   { clip-path: inset(100% 0 0 0); opacity:.4; }
    100% { clip-path: inset(0 0 0 0); opacity:1; }
}
.print-overlay h3 { font-size: 1.4rem; }
.print-overlay p { color: var(--muted); }

/* ============ FOOTER ============ */
footer {
    background: #0d0420;
    padding: 70px 48px 30px; position: relative;
    border-top: 1px solid rgba(241,144,24,.15);
}
footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.footer-grid {
    max-width: 1280px; margin: 0 auto; display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.footer-about { max-width: 360px; }
.footer-logo-wrap {
    position: relative; width: 200px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: center;
}
.footer-logo-wrap::before {
    content: ''; position: absolute; inset: -10%;
    background: radial-gradient(circle at 50% 50%, rgba(241,144,24,.45), rgba(241,144,24,.15) 38%, transparent 65%);
    filter: blur(22px);
    z-index: 0; pointer-events: none;
    animation: logoAura 4.5s ease-in-out infinite;
}
.footer-about img {
    width: 100%; height: auto; display: block; position: relative; z-index: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(241,144,24,.4)) drop-shadow(0 8px 18px rgba(0,0,0,.55));
    transition: transform .4s ease, filter .4s ease;
}
.footer-about img:hover {
    transform: scale(1.04);
    filter: brightness(0) invert(1) drop-shadow(0 0 24px rgba(241,144,24,.8)) drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.footer-about p { color: var(--muted); line-height: 1.9; font-size: .95rem; }
footer h4 { margin-bottom: 18px; font-size: 1.05rem; color: var(--orange); }
footer ul { list-style: none; }
footer ul li { margin-bottom: 10px; color: var(--muted); font-size: .95rem; display: flex; align-items: center; gap: 10px; }
footer ul li a { color: var(--muted); text-decoration: none; transition: color .3s; }
footer ul li a:hover { color: var(--orange); }
footer ul li i { color: var(--orange); width: 18px; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); color: var(--text-light); text-decoration: none;
    transition: all .3s;
}
.socials a:hover { background: var(--orange); color: #fff; transform: translateY(-3px); }
.copy {
    max-width: 1280px; margin: 0 auto; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.08); text-align: center;
    color: var(--muted); font-size: .9rem;
}
.copy .accent { color: var(--orange); }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(40px); transition: all .8s ease; }
.reveal.show { opacity: 1; transform: none; }

/* ============ ACTIVITIES SECTION (3D Cards) ============ */
.activities {
    background:
        linear-gradient(180deg, var(--purple-800) 0%, var(--purple-900) 100%);
    position: relative; overflow: hidden;
}
.activities-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.activities-blob {
    position: absolute; border-radius: 50%; filter: blur(110px); opacity: .55;
}
.activities-blob.blob-a {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(241,144,24,.45), transparent 70%);
    top: -120px; right: -120px;
    animation: blobFloat1 18s ease-in-out infinite;
}
.activities-blob.blob-b {
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(90,47,168,.55), transparent 70%);
    bottom: -180px; left: -160px;
    animation: blobFloat2 20s ease-in-out infinite;
}
.activities-grid-bg {
    position: absolute; inset: 0; opacity: .12;
    background-image:
        linear-gradient(rgba(241,144,24,.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241,144,24,.3) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.activities .container { position: relative; z-index: 2; }

.activities-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 32px; perspective: 1500px;
}
.activities-grid.is-collapsed .activity-card.is-extra {
    display: none;
}
.activities-grid.is-expanded .activity-card.is-extra {
    animation: cardFadeIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(40px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Show / Hide all button */
.activities-more {
    display: flex; justify-content: center;
    margin-top: 50px;
}
.activities-more-btn {
    position: relative;
    cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 800;
    color: var(--orange);
    background: linear-gradient(135deg, rgba(241,144,24,.08), rgba(90,47,168,.12));
    border: 2px solid rgba(241,144,24,.4);
    padding: 16px 36px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 14px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.activities-more-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    opacity: 0; transition: opacity .35s ease;
    z-index: -1;
}
.activities-more-btn:hover {
    color: #fff;
    border-color: var(--orange);
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(241,144,24,.45);
}
.activities-more-btn:hover::before { opacity: 1; }
.activities-more-btn .more-icon {
    font-size: .9rem;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.activities-more-btn.is-open .more-icon { transform: rotate(180deg); }
.activities-more-btn .more-count {
    color: var(--muted);
    font-size: .85rem; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    transition: color .35s ease, background .35s ease;
}
.activities-more-btn:hover .more-count {
    color: #fff;
    background: rgba(255,255,255,.18);
}
.activities-more-btn .more-text-hide { display: none; }
.activities-more-btn.is-open .more-text-show { display: none; }
.activities-more-btn.is-open .more-text-hide { display: inline; }

.activity-card {
    position: relative;
    border-radius: 24px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: opacity .8s ease, transform .8s ease;
}
.activity-3d {
    position: relative;
    height: 260px;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.08) inset;
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, rgba(241,144,24,.30), transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(90,47,168,.55), transparent 70%),
        linear-gradient(180deg, #1a0a30 0%, #0d0420 100%);
}
.activity-cover {
    position: absolute; inset: 0;
    overflow: hidden;
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 24px 30px;
}
.activity-cover img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    transform-origin: center bottom;
    transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.55))
        drop-shadow(0 0 28px rgba(241,144,24,.20))
        saturate(1.1) contrast(1.05);
    position: relative;
    z-index: 2;
}
.activity-card:hover .activity-cover img {
    transform: scale(1.08) translateZ(40px) translateY(-4px);
    filter:
        drop-shadow(0 18px 26px rgba(0,0,0,.65))
        drop-shadow(0 0 42px rgba(241,144,24,.45))
        saturate(1.15) contrast(1.08);
}
.activity-cover-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 25% at 50% 95%, rgba(0,0,0,.55), transparent 70%),
        linear-gradient(160deg, transparent 55%, rgba(241,144,24,.18) 100%);
    pointer-events: none;
    z-index: 1;
}
.activity-cover-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(241,144,24,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(241,144,24,.10) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .55;
    pointer-events: none;
    mask-image:    radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    z-index: 0;
}
.activity-shine {
    position: absolute; inset: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    opacity: 0;
    z-index: 3;
}
.activity-card:hover .activity-shine { opacity: 1; }

.activity-floating-icon {
    position: absolute; top: 18px; right: 18px;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow:
        0 12px 30px rgba(241,144,24,.45),
        0 0 0 1px rgba(255,255,255,.2) inset;
    transform: translateZ(40px);
    transition: transform .35s ease;
    z-index: 4;
}
.activity-card:hover .activity-floating-icon {
    transform: translateZ(60px) scale(1.05) rotate(-6deg);
}
.activity-tag {
    position: absolute; bottom: 16px; right: 16px;
    background: rgba(26,10,48,.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(241,144,24,.4);
    color: var(--orange);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
    transform: translateZ(30px);
    z-index: 4;
}
.activity-tag i { font-size: .55rem; animation: pulse 1.6s ease-in-out infinite; }

.activity-body {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-top: none;
    border-radius: 0 0 24px 24px;
    padding: 22px 24px 24px;
    transition: border-color .35s ease, background .35s ease;
}
.activity-card:hover .activity-body {
    border-color: rgba(241,144,24,.35);
    background: linear-gradient(180deg, rgba(241,144,24,.06), rgba(255,255,255,.02));
}
.activity-meta {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--muted); font-size: .82rem; margin-bottom: 10px;
}
.activity-meta i { color: var(--orange); margin-left: 6px; }
.activity-card h3 {
    font-size: 1.15rem; font-weight: 800;
    margin-bottom: 8px; color: #fff;
    line-height: 1.45;
}
.activity-card p {
    color: var(--muted); font-size: .92rem; line-height: 1.75;
    margin-bottom: 16px;
}
.activity-explore {
    background: none; border: none; cursor: pointer;
    color: var(--orange); font-weight: 700; font-size: .92rem;
    padding: 0;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit;
    transition: gap .3s ease, color .3s ease;
}
.activity-explore i { transition: transform .3s ease; }
.activity-card:hover .activity-explore { gap: 14px; }
.activity-card:hover .activity-explore i { transform: translateX(-4px); }

/* ============ LIGHTBOX ============ */
.lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(5,2,16,.94);
    backdrop-filter: blur(14px);
    display: none;
    align-items: center; justify-content: center;
    padding: 60px 80px;
}
.lightbox.active { display: flex; animation: fadeIn .25s ease; }

.lightbox-figure {
    position: relative;
    max-width: 100%; max-height: 100%;
    margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-figure img {
    max-width: 100%; max-height: 80vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow:
        0 30px 80px rgba(0,0,0,.6),
        0 0 0 1px rgba(241,144,24,.3),
        0 0 60px rgba(241,144,24,.25);
    animation: lbZoom .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes lbZoom {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
.lightbox-figure figcaption {
    color: var(--text-light);
    font-size: 1rem; font-weight: 700;
    background: rgba(241,144,24,.15);
    border: 1px solid rgba(241,144,24,.3);
    padding: 8px 22px; border-radius: 999px;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(241,144,24,.4);
    background: rgba(26,10,48,.75);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
    z-index: 5;
}
.lightbox-close:hover,
.lightbox-nav:hover {
    background: var(--orange);
    border-color: var(--orange);
    transform: scale(1.08);
    box-shadow: 0 0 24px rgba(241,144,24,.5);
}
.lightbox-close { top: 24px; left: 24px; }
.lightbox-nav.prev  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lightbox-nav.prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-nav.next:hover { transform: translateY(-50%) scale(1.08); }

.lightbox-counter {
    position: absolute; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: .9rem; font-weight: 700;
    background: rgba(0,0,0,.4);
    padding: 6px 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    letter-spacing: 1px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
    .navbar { padding: 4px 18px; min-height: 84px; }
    .nav-logo-slot { width: 110px; height: 110px; margin: -16px 0; }
    .nav-links {
        position: fixed;
        top: 70px;
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: center;
        background: rgba(26,10,48,.98);
        padding: 20px;
        gap: 18px;
        transform: translateY(-120%);
        transition: transform .4s;
    }
    .nav-links li {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
    .nav-links a {
        display: inline-block;
    }
    .nav-links.open { transform: translateY(0); }
    .nav-toggle { display: block; }
    .lang-switch { transform: scale(0.92); transform-origin: center; }
    .hero { padding: 100px 20px 150px; }
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-buttons { justify-content: center; }
    .hero-stack { max-width: 380px; }
    .hero-cert { max-width: 290px; width: 80%; }
    .brand-wall { max-width: 340px; }
    .brand-wall-stage { gap: 10px; padding: 0 5%; transform: rotateY(-18deg) rotateX(6deg) rotateZ(-2deg); }
    .brand-col-track { gap: 10px; }
    .brand-card { border-radius: 14px; padding: 12% 14%; }
    .hero-cert-btn { bottom: -88px; gap: 10px; padding: 8px 14px 8px 9px; }
    .hero-cert-btn__thumb { width: 44px; height: 44px; }
    .hero-cert-btn__title { font-size: .86rem; }
    .hero-cert-btn__sub { font-size: .66rem; }
    .hero-cert-btn__zoom { width: 30px; height: 30px; }
    .hero-collage-bg .collage-item { opacity: .35; }
    .cert-stamp { width: 78px; height: 78px; font-size: .58rem; top: -12px; left: -12px; }
    .cert-stamp i { font-size: 1rem; }
    .cert-zoom-hint { font-size: .72rem; padding: 6px 10px; bottom: 10px; right: 10px; }
    .cert-viewer { padding: 30px 12px; }
    .cert-viewer-close { width: 44px; height: 44px; font-size: 18px; top: 14px; left: 14px; }
    .cert-viewer-info { padding: 14px 18px; }
    .cert-viewer-info h3 { font-size: 1.1rem; }
    .cert-viewer-info p { font-size: .85rem; }
    .cert-viewer-meta { gap: 8px; font-size: .78rem; }
    .cert-viewer-meta span { padding: 5px 10px; }
    .cert-viewer-stage img { max-height: 60vh; border-width: 3px; }
    .hero-stats { gap: 8px; bottom: -8px; padding: 0 6px; }
    .stat { padding: 10px 8px; border-radius: 14px; flex: 1; }
    .stat .num { font-size: 1.3rem; }
    .stat .lbl { font-size: .72rem; }
    .collage-badge {
        font-size: .8rem; padding: 10px 18px; bottom: -78px;
    }
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-map-wrap { min-height: 420px; }
    .contact-map-panel,
    .contact-map-panel .contact-map { min-height: 360px; }
    .contact-form { padding: 26px 20px; }
    .contact-section .section-title,
    .contact-section .form-header {
        text-align: center;
    }
    .contact-form .form-submit {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .contact-form .form-note {
        justify-content: center;
        text-align: center;
    }
    .form-row { grid-template-columns: 1fr; }
    .map-card { right: 14px; left: 14px; bottom: 14px; padding: 14px; gap: 12px; }
    .map-card-icon { width: 46px; height: 46px; font-size: 18px; }
    .map-card h4 { font-size: 1rem; }
    .map-card p { font-size: .78rem; }
    .about-grid { grid-template-columns: 1fr; }
    .founders { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-about {
        max-width: 100%;
        display: flex; flex-direction: column; align-items: center;
    }
    .footer-logo-wrap { margin-left: auto; margin-right: auto; }
    .footer-about p { text-align: center; }
    .socials { justify-content: center; }
    footer ul li { justify-content: center; }
    footer h4 { text-align: center; }
    section.bk { padding: 70px 20px; }
    .modal-header, .modal-body { padding-left: 24px; padding-right: 24px; }
    .modal-header { flex-direction: column; text-align: center; padding-top: 60px; }

    /* Activities mobile tweaks */
    .activities-grid { grid-template-columns: 1fr; gap: 22px; }
    .activities-more { margin-top: 30px; }
    .activities-more-btn { padding: 14px 24px; font-size: .95rem; gap: 10px; }
    .activities-more-btn .more-count { font-size: .78rem; padding: 3px 9px; }
    .activity-3d { height: 220px; }
    .activity-floating-icon { width: 48px; height: 48px; font-size: 18px; top: 14px; right: 14px; }
    .activity-tag { font-size: .72rem; padding: 5px 11px; bottom: 12px; right: 12px; }
    .activity-body { padding: 18px 18px 20px; }
    .activity-card h3 { font-size: 1.05rem; }
    .activity-card p { font-size: .88rem; }

    /* Lightbox mobile tweaks */
    .lightbox { padding: 60px 12px; }
    .lightbox-close { top: 14px; left: 14px; width: 44px; height: 44px; font-size: 18px; }
    .lightbox-nav { width: 44px; height: 44px; font-size: 16px; }
    .lightbox-nav.prev { right: 10px; }
    .lightbox-nav.next { left: 10px; }
    .lightbox-figure img { max-height: 70vh; border-radius: 14px; }
    .lightbox-figure figcaption { font-size: .85rem; padding: 6px 14px; }
}

/* ============ LTR (English) layout fixes ============ */
html[dir="ltr"] .nav-links a::after {
    right: auto;
    left: 0;
}
html[dir="ltr"] .hero-text .quote {
    border-right: none;
    border-left: 3px solid var(--orange);
    padding-right: 0;
    padding-left: 16px;
}
html[dir="ltr"] .intro-hint i {
    margin-left: 0;
    margin-right: 8px;
}
html[dir="ltr"] .modal-body h3 {
    border-right: none;
    border-left: 3px solid var(--orange);
    padding-right: 0;
    padding-left: 14px;
}
html[dir="ltr"] .modal-body ul li {
    border-right: none;
    border-left: 3px solid var(--orange);
}
html[dir="ltr"] .modal-body ul li:hover {
    transform: translateX(4px);
}
html[dir="ltr"] .form-group input,
html[dir="ltr"] .form-group textarea,
html[dir="ltr"] .form-group select {
    padding: 14px 8px 10px 38px;
}
html[dir="ltr"] .form-group label {
    right: auto;
    left: 38px;
}
html[dir="ltr"] .form-group input:focus + label,
html[dir="ltr"] .form-group input:not(:placeholder-shown) + label,
html[dir="ltr"] .form-group textarea:focus + label,
html[dir="ltr"] .form-group textarea:not(:placeholder-shown) + label {
    right: auto;
    left: 32px;
}
html[dir="ltr"] .form-ico {
    right: auto;
    left: 8px;
}
html[dir="ltr"] .form-submit {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===== Floating WhatsApp Button ===== */
.wa-fab {
    position: fixed;
    right: 22px; bottom: 22px;
    z-index: 1600;
    width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    background: linear-gradient(145deg, #2bdf74, #128C7E);
    box-shadow: 0 12px 28px rgba(18,140,126,.5), 0 0 0 1px rgba(255,255,255,.14), 0 0 0 4px rgba(241,144,24,.18);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.wa-fab__icon {
    position: relative; z-index: 2;
    color: #fff; font-size: 32px; line-height: 1;
    display: inline-flex;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.wa-fab__ring {
    position: absolute; inset: 0; border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 0 rgba(43,223,116,.55);
    animation: waPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(43,223,116,.55); }
    70%  { box-shadow: 0 0 0 18px rgba(43,223,116,0); }
    100% { box-shadow: 0 0 0 0 rgba(43,223,116,0); }
}
.wa-fab__label {
    position: absolute; right: 74px; top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: rgba(26,10,48,.94);
    color: #fff; padding: 9px 15px; border-radius: 12px;
    font-size: .85rem; font-weight: 700; white-space: nowrap;
    opacity: 0; pointer-events: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    border: 1px solid rgba(241,144,24,.35);
    transition: opacity .3s ease, transform .3s ease;
}
.wa-fab__label::after {
    content: ''; position: absolute; right: -6px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: rgba(26,10,48,.94);
    border-right: 1px solid rgba(241,144,24,.35);
    border-top: 1px solid rgba(241,144,24,.35);
}
.wa-fab:hover {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 18px 38px rgba(18,140,126,.6), 0 0 0 1px rgba(255,255,255,.2), 0 0 0 5px rgba(241,144,24,.3);
}
.wa-fab:hover .wa-fab__label {
    opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 768px) {
    .wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; }
    .wa-fab__icon { font-size: 28px; }
    .wa-fab__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-fab__ring { animation: none !important; }
}