/* ============================================================
   GPCO — Gulf Pioneers for Contracting
   "Minimalist Luxury" Corporate Transformation
   Gold / Dark Navy / White Palette | Optimized v2
   ============================================================ */

/* ----- CSS Custom Properties ----- */
:root {
    /* ── DARK MODE (Default) ─────────────── */
    --gold: #C9A84C;
    --gold-light: #D4AF37;
    --gold-dark: #B8942E;
    --gold-subtle: rgba(201, 168, 76, 0.12);
    --gold-glow: rgba(201, 168, 76, 0.3);

    --navy-950: #070C1A;
    --navy-900: #0A0F1E;
    --navy-800: #0F1629;
    --navy-700: #1A2240;
    --navy-glass: rgba(7, 12, 26, 0.85);

    --white-warm: #F5F5F0;
    --white-muted: #E8E6E0;
    --slate-300: #C5C9D4;
    --slate-400: #9AA0B0;
    --slate-500: #6B7385;

    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(201, 168, 76, 0.08);
    --glass-blur: 20px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast: 0.3s var(--ease-out-expo);
    --transition-base: 0.6s var(--ease-out-quart);
    --transition-slow: 1s var(--ease-out-expo);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* ── THEME TOKENS (overridden in light mode) ─ */
    --theme-bg:          var(--navy-900);
    --theme-bg-alt:      var(--navy-950);
    --theme-bg-card:     rgba(15, 22, 41, 0.7);
    --theme-bg-nav:      rgba(10, 15, 30, 0.88);
    --theme-text:        #F5F5F0;
    --theme-text-muted:  #9AA0B0;
    --theme-text-strong: #FFFFFF;
    --theme-border:      rgba(201, 168, 76, 0.12);
    --theme-gold:        #D4AF37;
    --theme-gold-subtle: rgba(201, 168, 76, 0.08);
    --theme-shadow:      rgba(0, 0, 0, 0.5);
    --theme-glass:       rgba(255, 255, 255, 0.04);
    --theme-overlay:     rgba(7, 12, 26, 0.82);
    --theme-input-bg:    rgba(15, 22, 41, 0.6);
    --theme-section-alt: rgba(7, 12, 26, 0.4);
}

/* ── LIGHT MODE OVERRIDES ────────────────────────────────── */
[data-theme="light"] {
    --theme-bg:          #eef5ff;
    --theme-bg-alt:      #ddeeff;
    --theme-bg-card:     rgba(255, 255, 255, 0.85);
    --theme-bg-nav:      rgba(224, 238, 255, 0.95);
    --theme-text:        #0c1a3a;
    --theme-text-muted:  #3a4a6a;
    --theme-text-strong: #060d1f;
    --theme-border:      rgba(12, 26, 58, 0.12);
    --theme-gold:        #a07c1a;
    --theme-gold-subtle: rgba(160, 124, 26, 0.1);
    --theme-shadow:      rgba(12, 26, 58, 0.15);
    --theme-glass:       rgba(255, 255, 255, 0.6);
    --theme-overlay:     rgba(224, 238, 255, 0.8);
    --theme-input-bg:    rgba(255, 255, 255, 0.7);
    --theme-section-alt: rgba(200, 220, 255, 0.3);

    /* Remap navy vars for components that use them directly */
    --navy-950: #c8ddf7;
    --navy-900: #ddeeff;
    --navy-800: #e8f2ff;
    --navy-700: #f0f7ff;
    --white-warm: #0c1a3a;
    --white-muted: #1e2d4a;
    --slate-300: #3a4a6a;
    --slate-400: #2a3a58;
    --slate-500: #1a2a46;
    --gold-light: #a07c1a;
    --gold: #b08c22;
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(12, 26, 58, 0.1);
}

/* Theme surfaces are defined in the isolated theme layer at the end of this file. */

/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
.gpco-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #D4AF37;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.gpco-theme-toggle:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.2);
}

[data-theme="light"] .gpco-theme-toggle {
    border-color: rgba(12, 26, 58, 0.2);
    background: rgba(12, 26, 58, 0.07);
    color: #a07c1a;
}

[data-theme="light"] .gpco-theme-toggle:hover {
    background: rgba(12, 26, 58, 0.12);
    border-color: rgba(12, 26, 58, 0.35);
    box-shadow: 0 0 16px rgba(12, 26, 58, 0.1);
}

.gpco-theme-toggle svg {
    width: 18px;
    height: 18px;
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   0.3s ease !important;
}

/* Dark mode: show moon, hide sun */
.gpco-theme-toggle .icon-sun  { transform: rotate(90deg) scale(0); opacity: 0; }
.gpco-theme-toggle .icon-moon { transform: rotate(0deg)  scale(1); opacity: 1; }

/* Light mode: show sun, hide moon */
[data-theme="light"] .gpco-theme-toggle .icon-sun  { transform: rotate(0deg)   scale(1); opacity: 1; }
[data-theme="light"] .gpco-theme-toggle .icon-moon { transform: rotate(-90deg) scale(0); opacity: 0; }

/* Tooltip */
.gpco-theme-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(7, 12, 26, 0.9);
    color: #D4AF37;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 999;
}
.gpco-theme-toggle:hover::after { opacity: 1; }

[data-theme="light"] .gpco-theme-toggle::after {
    background: rgba(12, 26, 58, 0.9);
    color: #a07c1a;
}


/* ----- Base & Reset ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: 'Tajawal', 'Inter', sans-serif;
    background-color: var(--navy-900);
    color: var(--white-warm);
    line-height: 1.7;
    overflow-x: hidden;
}

/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gold-text {
    color: var(--gold-light);
}

/* ============================================================
   FIX 6: LAYOUT STABILIZATION — Icons, Sections, Box Model
   ============================================================ */

/* Icons: prevent compression in flex containers */
.fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin {
    flex-shrink: 0;
}


.gold-gradient {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark), var(--gold-light));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ----- Section Divider (Gold Line) ----- */
.section-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    border-radius: 2px;
    margin: 0 auto;
}

.gold-divider-thin {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.25), transparent);
    border: none;
}

/* ----- Section Badge ----- */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    margin-bottom: 20px;
    background: var(--gold-subtle);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 100px;
    color: var(--gold-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

/* ============================================================
   GLASSMORPHISM UTILITIES
   ============================================================ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

.glass-strong {
    background: rgba(7, 12, 26, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 168, 76, 0.06);
}

.gold-border-hover {
    transition: border-color var(--transition-fast);
}
.gold-border-hover:hover {
    border-color: rgba(201, 168, 76, 0.3) !important;
}

/* ============================================================
   SCROLL ANIMATIONS — IntersectionObserver Powered
   ============================================================ */

[data-animate] {
    opacity: 0;
    transition: all 0.8s var(--ease-out-expo);
}

[data-animate="fade-up"] {
    transform: translateY(50px);
}
[data-animate="fade-down"] {
    transform: translateY(-50px);
}
[data-animate="fade-left"] {
    transform: translateX(50px);
}
[data-animate="fade-right"] {
    transform: translateX(-50px);
}
[data-animate="scale-in"] {
    transform: scale(0.88);
}
[data-animate="zoom-in"] {
    transform: scale(0.92);
    opacity: 0;
}

[data-animate].visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

[data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(35px);
    transition: all 0.7s var(--ease-out-expo);
}

[data-animate-stagger].visible > * {
    opacity: 1;
    transform: translateY(0);
}

[data-animate-stagger].visible > *:nth-child(1)  { transition-delay: 0.04s; }
[data-animate-stagger].visible > *:nth-child(2)  { transition-delay: 0.08s; }
[data-animate-stagger].visible > *:nth-child(3)  { transition-delay: 0.12s; }
[data-animate-stagger].visible > *:nth-child(4)  { transition-delay: 0.16s; }
[data-animate-stagger].visible > *:nth-child(5)  { transition-delay: 0.20s; }
[data-animate-stagger].visible > *:nth-child(6)  { transition-delay: 0.24s; }
[data-animate-stagger].visible > *:nth-child(7)  { transition-delay: 0.28s; }
[data-animate-stagger].visible > *:nth-child(8)  { transition-delay: 0.32s; }
[data-animate-stagger].visible > *:nth-child(9)  { transition-delay: 0.36s; }
[data-animate-stagger].visible > *:nth-child(10) { transition-delay: 0.40s; }
[data-animate-stagger].visible > *:nth-child(11) { transition-delay: 0.44s; }
[data-animate-stagger].visible > *:nth-child(12) { transition-delay: 0.48s; }

/* ============================================================
   LOADING SCREEN — Premium Logo Display
   ============================================================ */
#gpco-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--navy-950);
    transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s var(--ease-out-expo);
}

#gpco-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.gpco-loader-logo-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(70vw, 320px);
    aspect-ratio: 659 / 378;
    padding: 10px 18px;
    background: radial-gradient(ellipse at center, rgba(245, 245, 240, 0.04), transparent 68%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 32px;
    animation: loaderPulse 1.6s ease-in-out infinite;
}

.gpco-loader-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}

.gpco-loader-glow {
    position: absolute;
    inset: 20%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.2), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.gpco-loader-bar-track {
    width: min(60vw, 240px);
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.gpco-loader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
    border-radius: 4px;
    animation: loaderFill 1.8s ease-in-out forwards;
}

@keyframes loaderPulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

@keyframes loaderFill {
    0% { width: 0%; }
    60% { width: 72%; }
    100% { width: 100%; }
}

.gpco-loader-label {
    color: var(--slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 16px;
    letter-spacing: 0.1em;
}

/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
    transition: all var(--transition-fast);
}

#navbar .nav-inner {
    height: 100px;
    transition: height var(--transition-fast);
}

#navbar.scrolled .nav-inner {
    height: 74px;
}

#navbar.scrolled {
    background: var(--navy-glass);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.1);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    text-decoration: none;
    outline: none;
}

.brand-link::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(7, 12, 26, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.34s var(--ease-out-expo), visibility 0.34s var(--ease-out-expo);
}

.brand-logo-frame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content !important;
    height: auto !important;
    padding: 3px 6px !important;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    isolation: isolate;
    transition: width var(--transition-fast), height var(--transition-fast), padding var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-link:hover .brand-logo-frame,
.brand-link:focus-visible .brand-logo-frame {
    border-color: rgba(212, 175, 55, 0.34);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 34px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(201, 168, 76, 0.06);
    transform: scale(1.12);
}

.brand-link:hover .brand-text,
.brand-link:focus-visible .brand-text {
    transform: scale(1.08);
}

.brand-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.brand-logo-shine::after {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: 2;
    background: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%, transparent 100%);
    transform: translateX(130%) skewX(-12deg);
    animation: gpcoLogoShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

.brand-preview {
    position: fixed;
    top: 50vh;
    left: 50vw;
    right: auto;
    z-index: 80;
    width: min(84vw, 900px);
    max-height: calc(100vh - 140px);
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(260px, 0.9fr);
    align-items: center;
    gap: 34px;
    padding: 34px;
    color: var(--white-warm);
    background:
        linear-gradient(135deg, rgba(15, 22, 41, 0.98), rgba(7, 12, 26, 0.95)),
        radial-gradient(circle at top right, rgba(201, 168, 76, 0.14), transparent 52%);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 26px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    overflow: auto;
    transform: translate(-50%, -50%) scale(0.94);
    transform-origin: center;
    pointer-events: none;
    transition: opacity 0.34s var(--ease-out-expo), visibility 0.34s var(--ease-out-expo), transform 0.34s var(--ease-out-expo);
}

.brand-link:hover::before,
.brand-link:focus-visible::before,
.brand-link:hover .brand-preview,
.brand-link:focus-visible .brand-preview {
    opacity: 1;
    visibility: visible;
}

.brand-link:hover .brand-preview,
.brand-link:focus-visible .brand-preview {
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.brand-preview-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 310px;
    padding: 24px;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.brand-preview-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.brand-preview-media picture {
    display: block;
    width: 100%;
}

.brand-preview-copy {
    display: grid;
    gap: 14px;
    text-align: start;
}

.brand-preview-copy strong {
    color: var(--gold-light);
    font-size: clamp(1.35rem, 2.4vw, 2.15rem);
    font-weight: 900;
    line-height: 1.35;
}

.brand-preview-copy span {
    color: var(--slate-300);
    font-size: clamp(0.98rem, 1.1vw, 1.12rem);
    line-height: 1.9;
}

#navbar.scrolled .brand-logo-frame {
    width: fit-content !important;
    height: auto !important;
    padding: 3px 6px !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    #navbar .nav-inner {
        height: 86px;
    }
    #navbar.scrolled .nav-inner {
        height: 68px;
    }
}

#navbar .nav-link {
    position: relative;
    color: var(--slate-400);
    font-weight: 500;
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

#navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: var(--gold-light);
    border-radius: 2px;
    transition: transform var(--transition-fast);
}

#navbar .nav-link:hover,
#navbar .nav-link.active {
    color: var(--gold-light);
    background: var(--gold-subtle);
}

#navbar .nav-link:hover::after,
#navbar .nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* ----- Language Toggle ----- */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
}

.lang-btn {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--slate-500);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.lang-btn.active {
    background: var(--gold-subtle);
    color: var(--gold-light);
    box-shadow: 0 2px 8px rgba(201, 168, 76, 0.15);
}

.lang-btn:not(.active):hover {
    color: var(--white-warm);
}

/* ============================================================
   HERO SECTION — Optimized for video visibility & mobile
   ============================================================ */
#home {
    position: relative;
}

.hero-media,
.hero-video-fallback,
.hero-video {
    position: absolute;
    inset: 0;
}

.hero-media {
    overflow: hidden;
    background-color: var(--navy-950);
}

.hero-video-fallback {
    background:
        linear-gradient(180deg, rgba(7, 12, 26, 0.2), rgba(7, 12, 26, 0.5)),
        url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    transform: scale(1.02);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    filter: saturate(1.05) contrast(1.15) brightness(0.95);
}

/* Lightened overlay — more video visible */
#home .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 12, 26, 0.88) 0%, rgba(7, 12, 26, 0.55) 40%, rgba(7, 12, 26, 0.75) 100%),
        radial-gradient(circle at center, rgba(201, 168, 76, 0.12), transparent 54%);
}

/* Hero shell — minimal blur, only behind content, so video shows through clearly */
.hero-shell {
    max-width: 750px;
    position: relative;
    z-index: 10;
    padding: 1rem 1rem;
    margin: 0 auto;
    border-radius: 1.5rem;
    /* Tight radial gradient behind content only — edges fade to transparent */
    background: radial-gradient(50% 45% at center, rgba(7, 12, 26, 0.4) 0%, rgba(7, 12, 26, 0.12) 55%, transparent 80%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@media (min-width: 640px) {
    .hero-shell {
        max-width: 800px;
        padding: 1.25rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-shell {
        max-width: 850px;
        padding: 1.5rem 2rem;
        background: radial-gradient(50% 50% at center, rgba(7, 12, 26, 0.45) 0%, rgba(7, 12, 26, 0.1) 50%, transparent 75%);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

.hero-luxury-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.055) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 72%);
    mask-image: radial-gradient(circle at center, black, transparent 72%);
    pointer-events: none;
}

.hero-title {
    margin-bottom: 22px;
    letter-spacing: 0;
}

.hero-brand-stage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(260px, 38vw, 540px);
    max-width: 100%;
    margin: 0 auto 20px;
}

.hero-brand-mark {
    --hero-logo-rotate-x: 0deg;
    --hero-logo-rotate-y: 0deg;
    --hero-logo-lift: 0px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: clamp(4px, 0.8vw, 10px);
    overflow: visible;
    border-radius: 28px;
    isolation: isolate;
    background:
        radial-gradient(ellipse at center, rgba(245, 245, 240, 0.045), transparent 62%),
        radial-gradient(ellipse at center, rgba(212, 175, 55, 0.09), transparent 72%);
    filter: drop-shadow(0 22px 52px rgba(0, 0, 0, 0.44)) drop-shadow(0 0 32px rgba(201, 168, 76, 0.12));
    transform: perspective(900px) rotateX(var(--hero-logo-rotate-x)) rotateY(var(--hero-logo-rotate-y)) translateY(var(--hero-logo-lift));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.22s ease-out, filter 0.22s ease-out;
    animation: heroLogoEntrance 1s var(--ease-out-expo) 0.08s both;
}

.hero-brand-mark::before {
    content: '';
    position: absolute;
    inset: 12%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.16), transparent 72%);
    filter: blur(26px);
    opacity: 0.66;
}

.hero-logo-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none; /* Hidden on mobile for performance */
    border-radius: 28px;
}

@media (min-width: 768px) {
    .hero-logo-shine {
        display: block;
        background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.52) 48%, rgba(212, 175, 55, 0.22) 51%, transparent 60%, transparent 100%);
        background-size: 280% 100%;
        background-position: 160% center;
        pointer-events: none;
        mix-blend-mode: screen;
        animation: heroLogoSweep 5.2s ease-in-out 0.6s infinite;
        box-shadow: 
            inset 0 2px 8px rgba(255, 255, 255, 0.18),
            inset 0 -2px 8px rgba(212, 175, 55, 0.08);
    }
}

.hero-brand-mark picture {
    display: block;
    width: 100%;
    transform: translateZ(22px);
}

.hero-brand-img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(1.04) contrast(1.03) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
    object-fit: contain;
}

.hero-arabic-title {
    display: block;
    margin-top: 20px;
    color: var(--white-warm);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.25;
}

@media (min-width: 768px) {
    .hero-arabic-title {
        font-size: 1.45rem;
    }
}

.hero-arabic-accent {
    display: block;
    margin-top: 6px;
    color: var(--gold-light);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .hero-arabic-accent {
        font-size: 1.3rem;
    }
}

.hero-subtitle {
    max-width: 700px;
    margin: 0 auto 24px;
    color: var(--slate-300);
    font-size: 0.9rem;
    line-height: 1.85;
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
}

.hero-kicker {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 999px;
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-size: 0.72rem;
    font-weight: 800;
}

@media (min-width: 768px) {
    .hero-kicker {
        font-size: 0.78rem;
    }
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    padding: 12px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: var(--white-warm);
    font-size: 0.85rem;
    font-weight: 900;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 45px rgba(0, 0, 0, 0.28);
    transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo);
    text-decoration: none;
}

@media (min-width: 768px) {
    .hero-glass-btn {
        min-width: 180px;
        padding: 14px 24px;
        font-size: 0.9rem;
    }
}

.hero-glass-btn-primary {
    color: var(--navy-950);
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.92), rgba(201, 168, 76, 0.76));
}

.hero-glass-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(201, 168, 76, 0.14);
}

.hero-glass-btn-primary:hover {
    background: linear-gradient(135deg, rgba(232, 197, 74, 0.96), rgba(212, 175, 55, 0.82));
}

.hero-load {
    opacity: 0;
    transform: translateY(24px);
    animation: heroFadeSlide 0.8s var(--ease-out-expo) forwards;
}

.hero-load-delay-1 { animation-delay: 0.1s; }
.hero-load-delay-2 { animation-delay: 0.2s; }
.hero-load-delay-3 { animation-delay: 0.3s; }

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

@keyframes heroLogoEntrance {
    from {
        opacity: 0;
        filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 12px rgba(201, 168, 76, 0.04));
    }
    to {
        opacity: 1;
    }
}

@keyframes heroLogoSweep {
    0% { 
        opacity: 0; 
        background-position: 160% center; 
    }
    10% { 
        opacity: 0.9; 
        background-position: 140% center; 
    }
    25% { 
        opacity: 0.8;
        background-position: -140% center; 
    }
    40% { 
        opacity: 0; 
        background-position: -160% center; 
    }
    100% { 
        opacity: 0; 
        background-position: -160% center; 
    }
}

/* Gold CTA button */
.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: var(--navy-950);
    font-weight: 800;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3);
    text-decoration: none;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 40px rgba(201, 168, 76, 0.4);
}

.btn-gold:active {
    transform: translateY(0);
}

/* ============================================================
   TRUST STRIP — Responsive Grid
   ============================================================ */
.trust-strip {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(201, 168, 76, 0.08);
    border-inline: 1px solid rgba(201, 168, 76, 0.08);
}

@media (min-width: 500px) {
    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 90px;
    padding: 16px 14px;
    background: rgba(7, 12, 26, 0.92);
    transition: background var(--transition-fast), transform var(--transition-fast);
    /* Mobile: stack icon above text, centered */
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media (min-width: 500px) {
    .trust-item {
        flex-direction: row;
        text-align: right;
        justify-content: flex-start;
    }
}

@media (min-width: 768px) {
    .trust-item {
        min-height: 112px;
        padding: 22px 18px;
        gap: 14px;
        flex-direction: row;
        text-align: right;
        justify-content: flex-start;
    }
}

.trust-item:hover {
    background: rgba(15, 22, 41, 0.94);
    transform: translateY(-2px);
}

.trust-item i {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold-light);
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.14);
    border-radius: 12px;
    font-size: 0.85rem;
    /* Always centered on mobile */
    margin: 0 auto;
}

@media (min-width: 500px) {
    .trust-item i {
        margin: 0;
    }
}

@media (min-width: 768px) {
    .trust-item i {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 14px;
        font-size: 1rem;
        margin: 0;
    }
}

.trust-item strong {
    display: block;
    color: var(--white-warm);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .trust-item strong {
        font-size: 1rem;
    }
}

.trust-item span {
    display: block;
    color: var(--slate-500);
    font-size: 0.7rem;
    margin-top: 3px;
}

@media (min-width: 768px) {
    .trust-item span {
        font-size: 0.78rem;
    }
}

/* ============================================================
   VALUE PROPOSITION — Responsive Grid
   ============================================================ */
.value-section {
    background:
        linear-gradient(180deg, var(--navy-950), rgba(15, 22, 41, 0.72), var(--navy-900));
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .value-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.value-card {
    position: relative;
    min-height: 270px;
    padding: 28px 22px;
    background: rgba(15, 22, 41, 0.72);
    border: 1px solid rgba(201, 168, 76, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

@media (min-width: 1024px) {
    .value-card {
        min-height: 310px;
        padding: 34px 28px;
    }
}

.value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), transparent 42%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.value-card:hover {
    transform: translateY(-7px);
    border-color: rgba(201, 168, 76, 0.22);
    background: rgba(15, 22, 41, 0.92);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.value-card:hover::before {
    opacity: 1;
}

.value-card-index {
    position: absolute;
    top: 16px;
    inset-inline-end: 20px;
    color: rgba(201, 168, 76, 0.22);
    font-weight: 900;
    font-size: 0.8rem;
}

@media (min-width: 1024px) {
    .value-card-index {
        top: 20px;
        inset-inline-end: 24px;
        font-size: 0.85rem;
    }
}

.value-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--navy-950);
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(201, 168, 76, 0.16);
    font-size: 1.2rem;
}

@media (min-width: 1024px) {
    .value-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        margin-bottom: 24px;
        border-radius: 18px;
        font-size: 1.4rem;
    }
}

.value-card h3 {
    position: relative;
    color: var(--white-warm);
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 12px;
    text-align: center;
}

@media (min-width: 1024px) {
    .value-card h3 {
        font-size: 1.22rem;
        text-align: left;
    }
}

.value-card p {
    position: relative;
    color: var(--slate-400);
    font-size: 0.88rem;
    line-height: 1.8;
}

@media (min-width: 1024px) {
    .value-card p {
        font-size: 0.96rem;
    }
}

/* ============================================================
   METHODOLOGY — Horizontal scroll on mobile
   ============================================================ */
.methodology-section {
    background: linear-gradient(180deg, var(--navy-950), var(--navy-900));
}

.methodology-track {
    position: relative;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.methodology-track::-webkit-scrollbar {
    height: 4px;
}

.methodology-track::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.methodology-track::-webkit-scrollbar-thumb {
    background: var(--gold-subtle);
    border-radius: 4px;
}

@media (min-width: 768px) {
    .methodology-track {
        overflow-x: visible;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 18px;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.methodology-track::before {
    content: '';
    position: absolute;
    display: none;
}

@media (min-width: 768px) {
    .methodology-track::before {
        display: block;
        top: 38px;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.42), transparent);
    }
}

.method-step {
    position: relative;
    min-width: 240px;
    scroll-snap-align: start;
    padding: 24px 18px;
    background: rgba(15, 22, 41, 0.72);
    border: 1px solid rgba(201, 168, 76, 0.08);
    border-radius: var(--radius-lg);
    text-align: center;
    overflow: hidden;
    transition: all var(--transition-fast);
}

@media (min-width: 768px) {
    .method-step {
        min-width: auto;
        padding: 28px 22px;
    }
}

.method-step:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 168, 76, 0.22);
    background: rgba(15, 22, 41, 0.92);
}

.method-step > span {
    position: absolute;
    top: 12px;
    inset-inline-start: 14px;
    color: rgba(201, 168, 76, 0.26);
    font-size: 0.75rem;
    font-weight: 900;
}

@media (min-width: 768px) {
    .method-step > span {
        top: 14px;
        inset-inline-start: 16px;
        font-size: 0.8rem;
    }
}

.method-step i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--navy-950);
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(201, 168, 76, 0.18);
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .method-step i {
        width: 56px;
        height: 56px;
        min-width: 56px;
        margin-bottom: 20px;
        border-radius: 18px;
        font-size: 1.25rem;
    }
}

.method-step h3 {
    color: var(--white-warm);
    font-size: 0.9rem;
    font-weight: 900;
    margin-bottom: 8px;
}

@media (min-width: 768px) {
    .method-step h3 {
        font-size: 1.05rem;
        margin-bottom: 10px;
    }
}

.method-step p {
    color: var(--slate-500);
    font-size: 0.8rem;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .method-step p {
        font-size: 0.86rem;
        line-height: 1.75;
    }
}

/* ============================================================
   SERVICE CARDS — Responsive Grid
   ============================================================ */
.service-card {
    padding: 28px 22px;
    background: rgba(15, 22, 41, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .service-card {
        padding: 36px 28px;
    }
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

.interactive-service-card {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    outline: none;
}

@media (min-width: 1024px) {
    .interactive-service-card {
        min-height: 390px;
    }
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.service-card:hover {
    border-color: rgba(201, 168, 76, 0.15);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-subtle);
    border-radius: var(--radius-md);
    color: var(--gold-light);
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: all var(--transition-fast);
}

@media (min-width: 1024px) {
    .service-icon {
        width: 64px;
        height: 64px;
        min-width: 64px;
        font-size: 1.75rem;
        margin-bottom: 24px;
    }
}

.service-card:hover .service-icon {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: var(--navy-950);
    transform: scale(1.05) rotateY(180deg);
}

.service-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white-warm);
    margin-bottom: 12px;
}

@media (min-width: 1024px) {
    .service-card h3 {
        font-size: 1.2rem;
    }
}

.service-card p {
    font-size: 0.85rem;
    color: var(--slate-500);
    line-height: 1.7;
}

@media (min-width: 1024px) {
    .service-card p {
        font-size: 0.9rem;
    }
}

.service-intro {
    margin-bottom: 18px;
}

.service-reveal {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(201, 168, 76, 0.08);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(14px);
    transition: opacity var(--transition-base), max-height var(--transition-base), transform var(--transition-base);
}

.interactive-service-card:hover .service-reveal,
.interactive-service-card:focus-within .service-reveal {
    opacity: 1;
    max-height: 180px;
    transform: translateY(0);
}

/* ============================================================
   HOTFIX — Header logo sizing - Mobile Optimized
   ============================================================ */
#navbar .nav-inner {
    height: 92px;
    min-height: 92px;
    gap: 18px;
    overflow: visible;
}

#navbar.scrolled .nav-inner {
    height: 74px;
    min-height: 74px;
}

.brand-link {
    position: relative;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    width: auto;
    max-width: min(42vw, 470px);
    min-width: 0;
    line-height: 1.2;
}

.brand-logo-frame {
    width: auto !important;
    height: 68px !important;
    max-width: 188px !important;
    max-height: 68px !important;
    padding: 5px 10px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: auto;
}

.brand-logo-frame picture {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
}

.brand-logo-img,
.brand-logo-frame img {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

.brand-text {
    display: grid;
    gap: 3px;
    min-width: 0;
    text-align: start;
    transition: transform 280ms ease;
}

.brand-company-name {
    color: var(--white-warm);
    font-size: clamp(0.82rem, 0.9vw, 1.02rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
    white-space: nowrap;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.brand-company-subtitle {
    color: var(--gold-light);
    font-size: clamp(0.64rem, 0.7vw, 0.78rem);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0.86;
}

#navbar.scrolled .brand-logo-frame {
    width: auto !important;
    height: 56px !important;
    max-width: 154px !important;
    max-height: 56px !important;
    flex-basis: auto;
    padding: 4px 8px !important;
    border-radius: 14px;
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .brand-link {
        max-width: 360px;
        gap: 10px;
    }
    .brand-logo-frame {
        height: 62px !important;
        max-width: 156px !important;
        padding: 4px 8px !important;
    }
    .brand-company-name { font-size: 0.82rem; }
    .brand-company-subtitle { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .brand-link { max-width: 190px; gap: 0; }
    .brand-text { display: none; }
}

/* Never show preview by default on touch devices */
.brand-link::before,
.brand-preview {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Show preview only on real desktop hover */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .brand-link:hover::before,
    .brand-link:focus-visible::before {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .brand-link:hover .brand-preview,
    .brand-link:focus-visible .brand-preview {
        display: grid !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
        pointer-events: none !important;
    }
}

/* Mobile compact header */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
    .brand-link::before, .brand-preview {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #navbar .nav-inner {
        height: 76px;
        min-height: 76px;
    }
    .brand-link { max-width: 140px; gap: 0; }
    .brand-text { display: none; }
    .brand-logo-frame, #navbar.scrolled .brand-logo-frame {
        width: auto !important;
        height: 54px !important;
        max-width: 130px !important;
        max-height: 54px !important;
        flex-basis: auto;
        padding: 3px 7px !important;
        border-radius: 13px;
    }
}

@media (max-width: 380px) {
    .brand-link { max-width: 120px; }
    .brand-logo-frame, #navbar.scrolled .brand-logo-frame {
        width: auto !important;
        height: 48px !important;
        max-width: 110px !important;
        max-height: 48px !important;
        padding: 3px 6px !important;
        border-radius: 11px;
    }
}

/* ============================================================
   FOOTER LOGO FRAME
   ============================================================ */
.footer-bottom-logo {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: min(78vw, 280px) !important;
    aspect-ratio: 659 / 378;
    height: auto !important;
    padding: 0 !important;
    background:
        radial-gradient(ellipse at center, rgba(245, 245, 240, 0.055), transparent 68%),
        rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.footer-bottom-logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

/* ============================================================
   MODERN LANGUAGE SWITCHER
   ============================================================ */
.gpco-lang-dropdown {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
}

.gpco-lang-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--slate-300);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.gpco-lang-trigger:hover,
.gpco-lang-dropdown:hover .gpco-lang-trigger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--gold-light);
}

.gpco-lang-list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--navy-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s var(--ease-out-expo);
    z-index: 59;
}

.gpco-lang-dropdown:hover .gpco-lang-list,
.gpco-lang-dropdown:focus-within .gpco-lang-list,
.gpco-lang-dropdown.open .gpco-lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gpco-lang-item {
    display: block;
    padding: 9px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate-300);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.gpco-lang-item:hover {
    background: var(--gold-subtle);
    color: var(--gold-light);
}

.gpco-lang-item.active {
    font-weight: 700;
    color: var(--gold-light);
    background: rgba(201, 168, 76, 0.2);
}

/* ============================================================
   LATEST NEWS — Responsive
   ============================================================ */
.gpco-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .gpco-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gpco-news-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.gpco-news-view-all {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 100px;
    color: var(--gold-light);
    background: var(--gold-subtle);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.gpco-news-card {
    background: var(--navy-800);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.gpco-news-card-img-wrapper {
    overflow: hidden;
    height: 180px;
}

@media (min-width: 768px) {
    .gpco-news-card-img-wrapper {
        height: 200px;
    }
}

.gpco-news-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

/* ============================================================
   PROJECT CARDS — Responsive
   ============================================================ */
.project-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

@media (min-width: 768px) {
    .project-card img {
        height: 250px;
    }
}

@media (min-width: 1024px) {
    .project-card img {
        height: 280px;
    }
}

/* ============================================================
   FAQ — No changes needed, works well on mobile
   ============================================================ */

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(15, 22, 41, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--white-warm);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    resize: vertical;
}

.contact-input:focus {
    border-color: rgba(201, 168, 76, 0.3);
    background: rgba(15, 22, 41, 0.8);
}

.contact-input::placeholder {
    color: var(--slate-500);
}

/* ============================================================
   FLOATING WHATSAPP BUTTON V2
   ============================================================ */
.floating-whatsapp-v2 {
    position: fixed;
    bottom: 28px;
    left: 28px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    font-family: 'Tajawal', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.40), 0 2px 8px rgba(0,0,0,0.18);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, background 0.3s ease;
    animation: waBounceIn 0.7s cubic-bezier(0.16,1,0.3,1) 1.5s both;
    white-space: nowrap;
    direction: rtl;
}

@media (max-width: 480px) {
    .floating-whatsapp-v2 {
        bottom: 18px;
        left: 14px;
        padding: 11px 16px 11px 14px;
    }
}

/* ============================================================
   REMAINING STYLES (Carried forward, unchanged)
   ============================================================ */
#gpco-accredited-slideshow { position: relative; width: 100%; height: 100%; }
.gpco-accredited-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; border-radius: 1.5rem; }
.gpco-accredited-slide.active { opacity: 1; }
.gpco-accredited-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.gpco-accredited-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: 1.5px solid rgba(255,255,255,0.5); transition: all 0.35s ease; cursor: pointer; }
.gpco-accredited-dot.active { background: var(--gold-light); border-color: var(--gold-light); transform: scale(1.3); box-shadow: 0 0 8px rgba(201,168,76,0.5); }
.gpco-accredited-img-wrapper { width: 100%; height: 320px; }
@media (min-width: 640px) { .gpco-accredited-img-wrapper { height: 450px; } }
@media (min-width: 1024px) { .gpco-accredited-img-wrapper { height: 550px; } }

.gpco-sika-logo-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid rgba(201,168,76,0.3);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,168,76,0.1);
    width: 100%;
    /* 25% taller than original 4:5 ratio → new ratio 4:6.25 = 16:25 */
    aspect-ratio: 16 / 25;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.gpco-sika-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: calc(var(--radius-md) - 1px);
    transition: transform 0.4s var(--ease-out-expo);
    padding: 0;
    margin: 0;
}

.gpco-partners-grid-v2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1rem; padding: 1.5rem 0; }
.gpco-partner-card-v2 { display: flex; align-items: center; justify-content: center; width: 140px; height: 80px; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,168,76,0.15); border-radius: 14px; transition: all 0.35s var(--ease-out-expo); overflow: hidden; }
@media (min-width: 768px) { .gpco-partner-card-v2 { width: 160px; height: 90px; padding: 14px 18px; } }
.gpco-partner-card-v2 img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; opacity: 1; transition: transform 0.3s ease; mix-blend-mode: multiply; }
.gpco-partner-white {
    background: #ffffff !important;
    border-color: rgba(201,168,76,0.2) !important;
    padding: 10px 14px !important;
}
.gpco-partner-white img {
    /* multiply blend removes black backgrounds from PNG logos */
    mix-blend-mode: multiply !important;
    opacity: 0.92;
}
.gpco-partner-more-btn { background: rgba(201,168,76,0.08) !important; border: 1.5px dashed rgba(201,168,76,0.4) !important; cursor: pointer; flex-direction: column; gap: 6px; }

.project-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.04); background: var(--navy-800); transition: all var(--transition-base); cursor: pointer; }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7,12,26,0.98) 100%); pointer-events: none; }
.project-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; }

.faq-item { background: rgba(15,22,41,0.6); border: 1px solid rgba(201,168,76,0.06); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-fast); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; color: var(--white-warm); font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--gold-light); font-weight: 300; transition: transform var(--transition-fast); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px; color: var(--slate-400); font-size: 0.92rem; line-height: 1.8; }

#gpco-lightbox { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
#gpco-lightbox.active { display: flex; }
.gpco-lb-backdrop { position: absolute; inset: 0; background: rgba(7,12,26,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gpco-lb-content { position: relative; max-width: min(90vw, 1000px); max-height: 90vh; }
.gpco-lb-close {
    position: absolute;
    top: -52px;
    left: 0;
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
}
.gpco-lb-img { display: block; max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; }
.gpco-lb-caption { color: rgba(255,255,255,0.7); text-align: center; margin-top: 10px; font-size: 0.9rem; }


#gpco-shrka-modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
#gpco-shrka-modal.active { display: flex; }
.gpco-shrka-backdrop { position: absolute; inset: 0; background: rgba(7,12,26,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; }

/* Section padding consistency for mobile */
section[id] { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { section[id] { padding-top: 8rem; padding-bottom: 8rem; } }

/* Text overflow fixes */
.nav-link, .mobile-link, .project-tag { overflow: hidden; text-overflow: ellipsis; }
button, a { white-space: normal; word-break: break-word; }

/* Mobile menu — fixed sibling of header, above everything */
#mobile-menu {
    will-change: transform;
    z-index: 9999;
}

/* Mobile menu inner padding */

/* Trust strip items centered on mobile */
@media (max-width: 499px) {
    .trust-item {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        gap: 8px;
        min-height: 82px;
        padding: 12px 10px;
    }
    .trust-item i {
        margin-bottom: 2px;
    }
}

/* Profile download CTA — premium glass redesign */
.gpco-profile-cta-container {
    max-width: 600px;
    margin-inline: auto;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(15, 22, 41, 0.85), rgba(7, 12, 26, 0.75));
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 24px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.gpco-profile-cta-text {
    color: var(--slate-300);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 20px;
}

.gpco-profile-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 220px;
    padding: 16px 32px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    color: var(--navy-950);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 4px 24px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all var(--transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gpco-profile-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(201, 168, 76, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.gpco-profile-cta-btn i {
    font-size: 1.15rem;
}

/* Responsive profile CTA on mobile */
@media (max-width: 480px) {
    .gpco-profile-cta-container {
        padding: 20px 18px;
    }
    .gpco-profile-cta-btn {
        min-width: 100%;
        padding: 14px 24px;
        font-size: 0.85rem;
    }
}

/* Blog / News Cards — premium attractive redesign */
.gpco-news-card {
    background: var(--navy-800);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.gpco-news-card:hover {
    transform: translateY(-6px);
    border-color: rgba(201, 168, 76, 0.15);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.gpco-news-card-img-wrapper {
    overflow: hidden;
    height: 200px;
    position: relative;
}

.gpco-news-card-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(7, 12, 26, 0.6) 100%);
    pointer-events: none;
}

.gpco-news-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.gpco-news-card:hover .gpco-news-card-img-wrapper img {
    transform: scale(1.06);
}

.gpco-news-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gold-light);
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

.gpco-news-card-date::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--slate-500);
}

.gpco-news-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white-warm);
    line-height: 1.45;
    margin-bottom: 10px;
}

.gpco-news-card-snippet {
    font-size: 0.85rem;
    color: var(--slate-500);
    line-height: 1.7;
    margin-bottom: 16px;
    flex-grow: 1;
}

.gpco-news-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold-light);
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 168, 76, 0.08);
}

.gpco-news-card-readmore:hover {
    color: var(--white-warm);
    gap: 12px;
}

/* ============================================================
   ★ PINNED FIX — HERO MOBILE REORDER
   Order on mobile: Title → Logo → Kicker → Subtitle → Buttons
   ============================================================ */
@media (max-width: 767px) {
    .hero-shell {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* 1st: Title */
    .hero-title               { order: 1; }
    /* 2nd: Logo/Brand */
    .hero-brand-stage         { order: 2; margin-bottom: 14px; }
    /* 3rd: Kicker (شركة مقاولات عامة | ...) */
    .hero-kicker              { order: 3; margin-bottom: 14px; }
    /* 4th: Subtitle */
    .hero-subtitle            { order: 4; }
    /* 5th: Buttons */
    .hero-actions             { order: 5; }
}

/* Reset on tablet and desktop — restore natural document order */
@media (min-width: 768px) {
    .hero-shell {
        display: block; /* Not flex — order property has no effect */
    }
    .hero-title, .hero-brand-stage, .hero-kicker,
    .hero-subtitle, .hero-actions {
        order: unset;
    }
}

/* ============================================================
   ★ PINNED FIX — TRUST STRIP: TEXT CENTERED ON MOBILE
   ============================================================ */
@media (max-width: 499px) {
    .trust-item div {
        text-align: center;
        width: 100%;
    }
    .trust-item strong,
    .trust-item span {
        text-align: center;
        display: block;
        width: 100%;
    }
}


/* ============================================================
   GPCO CONTRACTING AMBIENT LAYER
   CSS-only outlines; deliberately restrained below all content.
   ============================================================ */
@keyframes gpcoAmbientWatermark {
    0%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
    38% {
        opacity: 0.022;
    }
    52% {
        opacity: 0.035;
        transform: translate3d(10px, -7px, 0) scale(1.008);
    }
    70% {
        opacity: 0.02;
    }
}

@keyframes gpcoAmbientWatermarkReverse {
    0%, 100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
    35% {
        opacity: 0.02;
    }
    54% {
        opacity: 0.032;
        transform: translate3d(-9px, 6px, 0) scale(1.006);
    }
    72% {
        opacity: 0.02;
    }
}

section:not(#home),
footer#contact {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

section:not(#home)::before,
section:not(#home)::after,
footer#contact::before,
footer#contact::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: opacity, transform;
}

section:not(#home)::before,
footer#contact::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M82 380H672M246 370V62M210 370H284M230 370L260 62M256 86H648M306 86L572 198M574 86V154M574 154H632M604 154V322M572 322H636M208 138H300M208 138L146 228M208 138L326 228M144 228H330M176 278H298M246 86V34M214 34H278'/%3E%3Cpath d='M336 302H494M336 322H494M370 270V338M410 270V338M450 270V338M490 270V338M336 270H514V338H336Z' stroke-dasharray='7 8'/%3E%3Ccircle cx='604' cy='336' r='13'/%3E%3Cpath d='M604 349V378M588 378H620'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 260'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 220H438M38 196H422M62 172H398M94 148H366M126 124H334M154 100H306M180 76H280M208 52H252' stroke-dasharray='8 9'/%3E%3Cpath d='M66 220L220 52L394 220M112 220V170H328V220M166 170V122H274V170'/%3E%3Cpath d='M26 28H434M26 28V234M434 28V234' stroke-dasharray='4 10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 42rem auto, 25rem auto;
    background-position: 4% 14%, 92% 79%;
    animation: gpcoAmbientWatermark 26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

section:not(#home)::after,
footer#contact::after {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 350H650M82 350C74 320 104 298 160 298H312C366 298 398 322 388 350M98 350H374M130 322H342M178 298V224H338V298M202 224V178H308V224M308 192L402 130L520 174L466 218L364 214M402 130L478 70L626 136L520 174M478 70L536 40M536 40L670 78M670 78L642 112M140 350V372M330 350V372M120 372H350M556 250L620 290L682 286M520 174L556 250M466 218L556 250'/%3E%3Ccircle cx='156' cy='350' r='38'/%3E%3Ccircle cx='312' cy='350' r='38'/%3E%3Cpath d='M512 286H682L704 326H538Z' stroke-dasharray='7 8'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 250'%3E%3Cg fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M28 216H442M58 188H412M88 160H382M118 132H352M148 104H322M178 76H292M208 48H262' stroke-dasharray='7 9'/%3E%3Cpath d='M62 216L236 40L408 216M122 216V150H350V216M178 150V98H294V150'/%3E%3Cpath d='M30 26H440M30 26V230M440 26V230' stroke-dasharray='4 10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 39rem auto, 24rem auto;
    background-position: 96% 60%, 7% 16%;
    animation: gpcoAmbientWatermarkReverse 23s cubic-bezier(0.45, 0, 0.55, 1) -8s infinite;
}

section:not(#home):nth-of-type(3n)::before {
    background-position: 91% 8%, 7% 78%;
    animation-delay: -13s;
}

section:not(#home):nth-of-type(3n)::after {
    background-position: 5% 64%, 90% 14%;
    animation-delay: -4s;
}

section:not(#home):nth-of-type(3n + 1)::before {
    background-position: 14% 74%, 88% 11%;
    animation-delay: -19s;
}

section:not(#home):nth-of-type(3n + 1)::after {
    background-position: 84% 12%, 10% 80%;
    animation-delay: -15s;
}

footer#contact::before {
    background-position: 8% 62%, 93% 17%;
    animation-delay: -11s;
}

footer#contact::after {
    background-position: 93% 12%, 9% 78%;
    animation-delay: -18s;
}

section:not(#home) > :not([class*="absolute"]),
footer#contact > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    section:not(#home)::after,
    footer#contact::after {
        display: none;
    }

    section:not(#home)::before,
    footer#contact::before {
        background-size: 26rem auto, 15rem auto;
        background-position: 50% 28%, 88% 82%;
        animation-duration: 24s;
    }
}

@media (prefers-reduced-motion: reduce) {
    section:not(#home)::before,
    section:not(#home)::after,
    footer#contact::before,
    footer#contact::after {
        animation: none;
        opacity: 0.02;
        transform: none;
    }
}

/* ============================================================
   THEME CONTROL LAYER
   Semantic tokens and targeted component overrides.
   ============================================================ */
:root {
    --theme-bg: #0A0F1E;
    --theme-bg-alt: #070C1A;
    --theme-surface: rgba(15, 22, 41, 0.78);
    --theme-surface-elevated: rgba(26, 34, 64, 0.82);
    --theme-text: #F5F5F0;
    --theme-text-muted: #9AA0B0;
    --theme-text-strong: #FFFFFF;
    --theme-border: rgba(201, 168, 76, 0.14);
    --theme-shadow: rgba(0, 0, 0, 0.42);
    --theme-input-bg: rgba(15, 22, 41, 0.68);
    --theme-gold: #D4AF37;
    --theme-gold-subtle: rgba(201, 168, 76, 0.1);
}

[data-theme="light"] {
    --theme-bg: #F8FAFC;
    --theme-bg-alt: #F0F9FF;
    --theme-surface: rgba(255, 255, 255, 0.94);
    --theme-surface-elevated: #FFFFFF;
    --theme-text: #0F172A;
    --theme-text-muted: #334155;
    --theme-text-strong: #0F2747;
    --theme-border: rgba(15, 39, 71, 0.13);
    --theme-shadow: rgba(15, 39, 71, 0.12);
    --theme-input-bg: rgba(255, 255, 255, 0.92);
    --theme-gold: #9A7418;
    --theme-gold-subtle: rgba(154, 116, 24, 0.11);

    --navy-950: #E7F1FC;
    --navy-900: #F8FAFC;
    --navy-800: #EEF6FF;
    --navy-700: #E1EEFB;
    --white-warm: #0F172A;
    --white-muted: #1E3A5F;
    --slate-300: #334155;
    --slate-400: #475569;
    --slate-500: #64748B;
    --gold: #A67C18;
    --gold-light: #9A7418;
    --gold-dark: #7C5A10;
    --gold-subtle: rgba(154, 116, 24, 0.11);
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(15, 39, 71, 0.12);
}

/* The video hero deliberately keeps its cinematic dark palette in every theme. */
#home {
    --navy-950: #070C1A;
    --navy-900: #0A0F1E;
    --navy-800: #0F1629;
    --navy-700: #1A2240;
    --white-warm: #F5F5F0;
    --white-muted: #E8E6E0;
    --slate-300: #C5C9D4;
    --slate-400: #9AA0B0;
    --slate-500: #6B7385;
    --gold: #C9A84C;
    --gold-light: #D4AF37;
    --gold-dark: #B8942E;
    color: #F5F5F0;
}

body,
#navbar .nav-inner,
#mobile-menu,
section:not(#home),
footer#contact,
.value-card,
.method-step,
.service-card,
.project-card,
.tech-grid-card,
.faq-item,
.gpco-news-card,
.gpco-partner-card-v2,
.gpco-profile-cta-container,
.gpco-footer-location-grid,
.gpco-footer-map-col > a,
.contact-input,
.gpco-theme-accredited-frame {
    transition:
        background-color 300ms ease-in-out,
        background 300ms ease-in-out,
        color 300ms ease-in-out,
        border-color 300ms ease-in-out,
        box-shadow 300ms ease-in-out;
}

.value-card,
.method-step,
.service-card,
.project-card,
.tech-grid-card,
.gpco-news-card {
    transition:
        transform var(--transition-base),
        background-color 300ms ease-in-out,
        background 300ms ease-in-out,
        color 300ms ease-in-out,
        border-color 300ms ease-in-out,
        box-shadow 300ms ease-in-out;
}

body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

[data-theme="light"] body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

[data-theme="light"] section:not(#home) {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text);
}

[data-theme="light"] section:not(#home):nth-of-type(even),
[data-theme="light"] footer#contact {
    background-color: var(--theme-bg-alt) !important;
}

[data-theme="light"] .value-section,
[data-theme="light"] .methodology-section {
    background: linear-gradient(180deg, var(--theme-bg-alt), var(--theme-bg)) !important;
}

[data-theme="light"] :is(.bg-navy-950, .bg-navy-900, .bg-navy-800, .bg-navy-800\/30) {
    background-color: var(--theme-surface) !important;
}

[data-theme="light"] :is(.bg-white\/5, .bg-white\/\[0\.03\]) {
    background-color: rgba(15, 39, 71, 0.045) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] #navbar .nav-inner {
    background: rgba(248, 250, 252, 0.9) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] #mobile-menu {
    background: rgba(248, 250, 252, 0.98) !important;
    color: var(--theme-text);
}

[data-theme="light"] :is(.nav-link, .mobile-link, .brand-company-name, .brand-company-subtitle, .gpco-lang-trigger, .gpco-lang-item) {
    color: var(--theme-text) !important;
}

[data-theme="light"] :is(.gpco-lang-trigger, .gpco-lang-list) {
    background-color: var(--theme-surface-elevated) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] :is(.nav-link:hover, .mobile-link:hover, .gpco-lang-item:hover) {
    color: var(--theme-gold) !important;
}

[data-theme="light"] #menu-toggle {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] #hamburger-icon span {
    background-color: var(--theme-text) !important;
}

[data-theme="light"] :is(
    .value-card,
    .method-step,
    .service-card,
    .project-card,
    .tech-grid-card,
    .faq-item,
    .gpco-news-card,
    .gpco-partner-card-v2:not(.gpco-partner-white),
    .gpco-profile-cta-container,
    .gpco-footer-location-grid,
    .gpco-footer-map-col > a
) {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    box-shadow: 0 10px 28px var(--theme-shadow) !important;
}

[data-theme="light"] .gpco-partner-white {
    background: #FFFFFF !important;
    border-color: rgba(15, 39, 71, 0.14) !important;
    box-shadow: 0 8px 20px rgba(15, 39, 71, 0.08) !important;
}

[data-theme="light"] :is(.contact-input, .gpco-theme-accredited-frame) {
    background: var(--theme-input-bg) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
}

[data-theme="light"] .contact-input:focus {
    background: #FFFFFF !important;
    border-color: rgba(154, 116, 24, 0.48) !important;
}

[data-theme="light"] .contact-input::placeholder {
    color: var(--theme-text-muted) !important;
}

[data-theme="light"] section:not(#home) :is(h1, h2, h3, h4, h5, h6, summary),
[data-theme="light"] footer#contact :is(h1, h2, h3, h4, h5, h6, summary),
[data-theme="light"] :is(.text-\[\#F5F5F0\], .text-white) {
    color: var(--theme-text-strong) !important;
}

[data-theme="light"] section:not(#home) :is(p, li, label),
[data-theme="light"] footer#contact :is(p, li, label) {
    color: var(--theme-text) !important;
}

[data-theme="light"] :is(.text-slate-500, .text-slate-400, .gpco-news-card-snippet, .faq-item p, .service-card p, .method-step p, .value-card p) {
    color: var(--theme-text-muted) !important;
}

[data-theme="light"] :is(.gold-text, .section-badge, .text-\[\#D4AF37\], .text-\[\#C9A84C\], .gpco-news-card-date, .gpco-news-card-readmore) {
    color: var(--theme-gold) !important;
}

[data-theme="light"] .project-overlay {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.04) 24%, rgba(248, 250, 252, 0.97) 100%);
}

[data-theme="light"] .project-info,
[data-theme="light"] .project-info :is(h3, p, .project-tag) {
    color: var(--theme-text-strong) !important;
}

[data-theme="light"] .project-tag {
    background-color: rgba(154, 116, 24, 0.12);
    border-color: rgba(154, 116, 24, 0.22);
}

.gpco-theme-accredited-frame {
    background: var(--navy-900);
}

.gpco-profile-cta-container {
    background: linear-gradient(135deg, rgba(15, 22, 41, 0.85), rgba(7, 12, 26, 0.75));
    border: 1px solid rgba(201, 168, 76, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(201, 168, 76, 0.06);
}

.gpco-profile-cta-icon {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(201, 168, 76, 0.08));
    border: 1px solid rgba(201, 168, 76, 0.25);
    box-shadow: 0 4px 20px rgba(201, 168, 76, 0.15);
}

.gpco-profile-cta-container > h3 {
    color: var(--white-warm) !important;
}

.gpco-profile-cta-text,
.gpco-profile-cta-container > div:last-child > span:not([style*="color:#C9A84C"]) {
    color: var(--slate-400) !important;
}

.gpco-profile-cta-container [style*="color:#C9A84C"],
.gpco-profile-cta-container [style*="color:#D4AF37"] {
    color: var(--theme-gold) !important;
}

[data-theme="light"] .gpco-profile-cta-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.94)) !important;
    border-color: rgba(154, 116, 24, 0.24) !important;
}

[data-theme="light"] .gpco-profile-cta-icon {
    background: linear-gradient(135deg, rgba(154, 116, 24, 0.14), rgba(154, 116, 24, 0.06));
    border-color: rgba(154, 116, 24, 0.25);
}

.gpco-footer-location-grid {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(201, 168, 76, 0.1);
}

.gpco-footer-map-col > a {
    background: linear-gradient(135deg, rgba(15, 22, 41, 0.9) 0%, rgba(26, 34, 64, 0.9) 100%) !important;
    border-color: rgba(201, 168, 76, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 168, 76, 0.05) !important;
}

.gpco-footer-map-col > a:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.2) !important;
}

[data-theme="light"] .gpco-footer-location-grid {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: var(--theme-border) !important;
}

[data-theme="light"] .gpco-footer-location-grid :is(h3, a:not(.premium-map-btn)) {
    color: var(--theme-text-strong) !important;
}

[data-theme="light"] .gpco-footer-location-grid a:not(.premium-map-btn):hover {
    color: var(--theme-gold) !important;
}

[data-theme="light"] .gpco-footer-location-grid div[style*="color:#94a3b8"] {
    color: var(--theme-text-muted) !important;
}

[data-theme="light"] .gpco-footer-map-col > a {
    background: linear-gradient(135deg, #FFFFFF 0%, #EAF5FF 100%) !important;
    border-color: rgba(154, 116, 24, 0.22) !important;
    box-shadow: 0 10px 28px rgba(15, 39, 71, 0.12), 0 0 0 1px rgba(154, 116, 24, 0.06) !important;
}

[data-theme="light"] .gpco-footer-map-col > a:hover {
    box-shadow: 0 16px 38px rgba(15, 39, 71, 0.17), 0 0 0 1px rgba(154, 116, 24, 0.2) !important;
}

[data-theme="light"] footer#contact :is(.contact-info-item, .footer-bottom-meta, .footer-bottom-meta a) {
    color: var(--theme-text) !important;
}

/* ============================================================
   GPCO TECH — Isolated binary interface
   ============================================================ */
/* ============================================================
   GPCO ANIMATION LAYERS
   ============================================================ */
.gpco-construction-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.gpco-tech-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* Ensure all main content sections stack above the canvas */
section:not(#home) > *:not([class*="absolute"]):not(.gpco-tech-binary-layer):not(.gpco-tech-spotlight),
footer#contact > .container {
    position: relative;
    z-index: 1;
}

/* GPCO Tech section: ensure binary layer is below card content */
#gpco-tech {
    isolation: isolate;
}

#gpco-tech > .gpco-tech-binary-layer {
    z-index: 0;
}

#gpco-tech > .relative.z-10 {
    position: relative !important;
    z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
    .gpco-construction-canvas,
    .gpco-tech-canvas-overlay {
        display: none !important;
    }
}

#contact {
    scroll-margin-top: 116px;
}

#gpco-tech {
    background:
        radial-gradient(circle at 14% 20%, rgba(201, 168, 76, 0.1), transparent 34%),
        radial-gradient(circle at 84% 82%, rgba(57, 161, 255, 0.08), transparent 38%),
        var(--navy-900);
}

#gpco-tech::before,
#gpco-tech::after {
    display: none;
}

.gpco-tech-binary-layer,
.gpco-tech-spotlight {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Override the site-wide content stacking helper for Tech-only background layers. */
#gpco-tech > .gpco-tech-binary-layer,
#gpco-tech > .gpco-tech-spotlight {
    position: absolute;
    z-index: 0;
}

.gpco-tech-spotlight {
    background:
        linear-gradient(115deg, transparent 0%, rgba(201, 168, 76, 0.04) 48%, transparent 74%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.025), transparent 66%);
}

.gpco-tech-binary-layer span {
    position: absolute;
    inset-block-start: calc(100% + var(--tech-y));
    inset-inline-start: var(--tech-x);
    z-index: 1;
    display: block;
    color: rgba(212, 175, 55, 0.9);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    line-height: 1;
    font-size: 0;
    opacity: 0;
    user-select: none;
    will-change: transform, opacity, text-shadow;
    animation:
        gpcoTechBinaryAscend var(--tech-float) linear var(--tech-delay) infinite,
        electricPulse 7s steps(1, end) var(--tech-pulse) infinite;
}

/* A persistent binary field makes the technology texture visible from first paint. */
.gpco-tech-binary-layer::before,
.gpco-tech-binary-layer::after {
    position: absolute;
    z-index: 0;
    inset: -12% -7%;
    display: block;
    overflow: hidden;
    color: rgba(212, 175, 55, 0.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(0.56rem, 0.8vw, 0.78rem);
    font-weight: 700;
    line-height: 2.2;
    letter-spacing: 0.32em;
    white-space: pre;
    direction: ltr;
    opacity: 0.038;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: gpcoTechBinaryField 13s linear infinite;
}

.gpco-tech-binary-layer::before {
    content: '0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0 0 1\A1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1\A0 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 0 1 0 1 0 1 1 0 0 1 0 1\A1 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 0 1 1 0 1 0 0 1 1 0 1\A0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 0 1\A1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0\A0 1 1 0 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1';
}

.gpco-tech-binary-layer::after {
    content: '1 0 1 0 0 1 1 0 1 0 1 0 0 1 1 0 1 0 0 1 0 1 1 0 1 0 0 1\A0 1 0 1 1 0 0 1 0 1 0 1 1 0 0 1 0 1 1 0 1 0 0 1 0 1 1 0\A1 0 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 0\A0 1 1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 0 1 1 0\A1 0 1 0 0 1 1 0 1 0 0 1 1 0 1 0 1 1 0 0 1 0 1 0 1 1 0 0\A0 1 0 1 1 0 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0 1 0 0 1 1\A1 1 0 0 1 0 1 1 0 0 1 0 1 0 1 1 0 0 1 0 1 0 0 1 1 0 1 0';
    animation-delay: -6.5s;
    transform: translate3d(-2.5%, -9%, 0);
}

@keyframes gpcoTechBinaryField {
    0%, 100% {
        opacity: 0.038;
        transform: translate3d(0, 0, 0);
    }
    38% {
        opacity: 0.046;
    }
    52% {
        opacity: 0.03;
        transform: translate3d(1.2%, -3.5%, 0);
    }
    76% {
        opacity: 0.044;
    }
}

/* Each glyph becomes a narrow column of binary digits, not a sparse single character. */
.gpco-tech-binary-layer span::after {
    content: '010011010101';
    display: block;
    color: inherit;
    font-size: clamp(0.68rem, 1.05vw, 0.92rem);
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: 0.08em;
    text-align: center;
    text-orientation: upright;
    writing-mode: vertical-rl;
}

.gpco-tech-binary-layer span:nth-child(3n)::after {
    content: '101100101011';
}

.gpco-tech-binary-layer span:nth-child(3n + 1)::after {
    content: '011010010110';
}

.gpco-tech-binary-layer span:nth-child(4n)::after {
    content: '110010101001';
}

@keyframes gpcoTechBinaryAscend {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.92);
    }
    14% {
        opacity: 0.12;
    }
    50% {
        opacity: 0.22;
    }
    84% {
        opacity: 0.12;
    }
    100% {
        opacity: 0;
        transform: translate3d(8px, calc(-100vh - 9rem), 0) scale(1.04);
    }
}

@keyframes electricPulse {
    0%, 88%, 100% {
        text-shadow: none;
        filter: none;
    }
    91% {
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.7), 0 0 18px rgba(57, 161, 255, 0.52), 0 0 28px rgba(57, 161, 255, 0.22);
        filter: brightness(1.85);
    }
    94% {
        text-shadow: 0 0 4px rgba(212, 175, 55, 0.44), 0 0 12px rgba(57, 161, 255, 0.3);
        filter: brightness(1.3);
    }
}

.gpco-tech-card {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    color: var(--white-warm);
    text-decoration: none;
    background: linear-gradient(145deg, rgba(26, 34, 64, 0.9), rgba(7, 12, 26, 0.84));
    border: 1px solid rgba(201, 168, 76, 0.16);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    transform: perspective(1100px) translateY(0) scale(1);
    transform-style: preserve-3d;
    transition:
        transform 350ms var(--ease-out-expo),
        background 300ms ease-in-out,
        border-color 300ms ease-in-out,
        box-shadow 300ms ease-in-out,
        color 300ms ease-in-out;
}

.gpco-tech-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.1) 48%, transparent 72%);
    opacity: 0;
    transform: translateX(-115%);
    transition: transform 650ms var(--ease-out-expo), opacity 300ms ease-in-out;
}

.gpco-tech-card:hover,
.gpco-tech-card:focus-visible {
    color: var(--white-warm);
    border-color: rgba(212, 175, 55, 0.62);
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(212, 175, 55, 0.13), 0 0 34px rgba(201, 168, 76, 0.12);
    transform: perspective(1100px) translateY(-8px) scale(1.012) rotateX(1deg);
}

.gpco-tech-card:hover::after,
.gpco-tech-card:focus-visible::after {
    opacity: 1;
    transform: translateX(115%);
}

.gpco-tech-card:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.74);
    outline-offset: 4px;
}

.gpco-tech-card-media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 18%, rgba(212, 175, 55, 0.18), transparent 36%),
        linear-gradient(135deg, var(--navy-700), var(--navy-950));
    border-bottom: 1px solid rgba(201, 168, 76, 0.13);
}

.gpco-tech-card-image,
.gpco-tech-card-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gpco-tech-card-image {
    z-index: 2;
    display: block;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.08);
    transition: transform 550ms var(--ease-out-expo), opacity 200ms ease;
}

.gpco-tech-card-image.is-unavailable {
    opacity: 0;
}

.gpco-tech-card-fallback {
    z-index: 1;
    display: grid;
    place-items: center;
    color: var(--gold-light);
    background:
        linear-gradient(135deg, rgba(7, 12, 26, 0.48), rgba(15, 22, 41, 0.86)),
        radial-gradient(circle at center, rgba(201, 168, 76, 0.22), transparent 58%);
    opacity: 0;
    transition: opacity 200ms ease;
}

.gpco-tech-card-image.is-unavailable + .gpco-tech-card-fallback {
    opacity: 1;
}

.gpco-tech-card-fallback i {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    font-size: 1.65rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    background: rgba(201, 168, 76, 0.1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.gpco-tech-card-index {
    position: absolute;
    z-index: 3;
    top: 16px;
    inset-inline-end: 16px;
    padding: 5px 9px;
    color: var(--gold-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    background: rgba(7, 12, 26, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.gpco-tech-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 230px;
    flex: 1;
    flex-direction: column;
    padding: 26px 24px 24px;
}

.gpco-tech-card-kicker {
    margin-bottom: 10px;
    color: var(--gold-light);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.gpco-tech-card h3 {
    margin: 0 0 12px;
    color: var(--white-warm);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.45;
}

.gpco-tech-card p {
    margin: 0;
    color: var(--slate-400);
    font-size: 0.9rem;
    line-height: 1.9;
}

.gpco-tech-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--gold-light);
    font-size: 0.86rem;
    font-weight: 800;
}

.gpco-tech-card-link i {
    transition: transform 250ms var(--ease-out-expo);
}

.gpco-tech-card:hover .gpco-tech-card-image,
.gpco-tech-card:focus-visible .gpco-tech-card-image {
    transform: scale(1.06);
}

.gpco-tech-card:hover .gpco-tech-card-link i,
.gpco-tech-card:focus-visible .gpco-tech-card-link i {
    transform: translateX(-5px);
}

html[dir="ltr"] .gpco-tech-card:hover .gpco-tech-card-link i,
html[dir="ltr"] .gpco-tech-card:focus-visible .gpco-tech-card-link i {
    transform: translateX(5px) rotate(180deg);
}

[data-theme="light"] #gpco-tech {
    background:
        radial-gradient(circle at 14% 20%, rgba(154, 116, 24, 0.12), transparent 34%),
        radial-gradient(circle at 84% 82%, rgba(56, 139, 253, 0.1), transparent 38%),
        var(--theme-bg-alt) !important;
}

[data-theme="light"] .gpco-tech-spotlight {
    background:
        linear-gradient(115deg, transparent 0%, rgba(154, 116, 24, 0.04) 48%, transparent 74%),
        radial-gradient(circle at center, rgba(15, 39, 71, 0.025), transparent 66%);
}

[data-theme="light"] .gpco-tech-binary-layer span {
    color: rgba(15, 70, 130, 0.86);
}

[data-theme="light"] .gpco-tech-binary-layer::before,
[data-theme="light"] .gpco-tech-binary-layer::after {
    color: rgba(15, 70, 130, 0.84);
}

[data-theme="light"] .gpco-tech-card {
    color: var(--theme-text) !important;
    background: linear-gradient(145deg, #FFFFFF, #EDF6FF) !important;
    border-color: rgba(15, 39, 71, 0.14);
    box-shadow: 0 14px 34px rgba(15, 39, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .gpco-tech-card:hover,
[data-theme="light"] .gpco-tech-card:focus-visible {
    color: var(--theme-text) !important;
    border-color: rgba(154, 116, 24, 0.55);
    box-shadow: 0 22px 48px rgba(15, 39, 71, 0.16), 0 0 0 1px rgba(154, 116, 24, 0.12), 0 0 30px rgba(154, 116, 24, 0.1);
}

[data-theme="light"] .gpco-tech-card-media {
    background:
        radial-gradient(circle at 24% 18%, rgba(154, 116, 24, 0.16), transparent 36%),
        linear-gradient(135deg, #EAF5FF, #DCECFB);
    border-color: rgba(15, 39, 71, 0.1);
}

[data-theme="light"] .gpco-tech-card-fallback {
    color: var(--theme-gold);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(223, 240, 255, 0.9)),
        radial-gradient(circle at center, rgba(154, 116, 24, 0.16), transparent 58%);
}

[data-theme="light"] .gpco-tech-card-index {
    color: var(--theme-gold);
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(154, 116, 24, 0.25);
}

[data-theme="light"] .gpco-tech-card h3 {
    color: var(--theme-text-strong) !important;
}

[data-theme="light"] .gpco-tech-card p {
    color: var(--theme-text-muted) !important;
}

@media (max-width: 767px) {
    .gpco-tech-binary-layer::before,
    .gpco-tech-binary-layer::after {
        inset: -8% -20%;
        font-size: 0.48rem;
        line-height: 2.05;
        letter-spacing: 0.2em;
    }

    .gpco-tech-binary-layer span:nth-child(n + 15) {
        display: none;
    }

    .gpco-tech-card-content {
        min-height: 0;
        padding: 22px 20px;
    }

    .gpco-tech-card:hover,
    .gpco-tech-card:focus-visible {
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gpco-tech-binary-layer::before,
    .gpco-tech-binary-layer::after {
        animation: none;
        opacity: 0.035;
        transform: none;
    }

    .gpco-tech-binary-layer span {
        animation: none;
        opacity: 0.03;
        transform: none;
    }

    .gpco-tech-card,
    .gpco-tech-card::after,
    .gpco-tech-card-image,
    .gpco-tech-card-link i {
        transition: none;
    }
}

/* ============================================================
   TRUST, SIKA & TECH — Targeted refinement layer
   ============================================================ */
@media (max-width: 767px) {
    .trust-item.trust-item--quality {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .trust-item.trust-item--quality i {
        margin-inline: auto;
    }

    .trust-item.trust-item--quality > div,
    .trust-item.trust-item--quality strong,
    .trust-item.trust-item--quality span {
        width: 100%;
        text-align: center;
    }
}

[data-theme="light"] .trust-strip {
    background: #EAF7FF !important;
    border-color: rgba(43, 128, 180, 0.22) !important;
}

[data-theme="light"] .trust-grid {
    background: rgba(43, 128, 180, 0.22);
    border-color: rgba(43, 128, 180, 0.22);
}

[data-theme="light"] .trust-item {
    background: #BFE3F5;
}

[data-theme="light"] .trust-item:hover {
    background: #A9D9F1;
}

[data-theme="light"] .trust-item strong {
    color: #0F2747;
}

[data-theme="light"] .trust-item span {
    color: #425A78;
}

[data-theme="light"] .trust-item i {
    color: #0C5F89;
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(12, 95, 137, 0.24);
}

[data-theme="light"] .gpco-sika-performance-panel {
    background:
        radial-gradient(circle at 90% 8%, rgba(212, 175, 55, 0.16), transparent 32%),
        linear-gradient(135deg, #0B1B35, #132A4A) !important;
    border-color: rgba(212, 175, 55, 0.32) !important;
    box-shadow: 0 20px 46px rgba(15, 39, 71, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .gpco-sika-performance-panel h3 {
    color: #F4D76A !important;
    text-shadow: 0 1px 14px rgba(212, 175, 55, 0.16);
}

[data-theme="light"] .gpco-sika-performance-panel :is(p, span) {
    color: #F8FAFC !important;
}

[data-theme="light"] .gpco-sika-performance-panel .grid .grid > div {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="light"] .gpco-sika-performance-panel .grid .grid > div i {
    color: #E8C54A !important;
}

/* Always-on Cyber Security field: visible immediately, with no staged entry. */
#gpco-tech .gpco-tech-binary-layer {
    background:
        linear-gradient(rgba(80, 172, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 172, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(57, 161, 255, 0.08), transparent 62%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
}

#gpco-tech .gpco-tech-binary-layer::before,
#gpco-tech .gpco-tech-binary-layer::after {
    opacity: 0.05;
    animation: gpcoTechBinaryField 9s linear infinite;
}

#gpco-tech .gpco-tech-binary-layer::after {
    animation-delay: -4.5s;
}

#gpco-tech .gpco-tech-spotlight {
    background:
        linear-gradient(90deg, transparent 0%, rgba(57, 161, 255, 0.055) 46%, rgba(212, 175, 55, 0.07) 50%, rgba(57, 161, 255, 0.055) 54%, transparent 100%),
        radial-gradient(circle at center, rgba(57, 161, 255, 0.06), transparent 68%);
    background-size: 240% 100%, 100% 100%;
    animation: gpcoTechCyberScan 7s linear infinite;
}

@keyframes gpcoTechCyberScan {
    from { background-position: 140% center, center; }
    to   { background-position: -140% center, center; }
}

/* Each tech-media frame remains digital whether its optional image exists or not. */
.gpco-tech-card-media {
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 45%, rgba(57, 161, 255, 0.16), transparent 58%),
        linear-gradient(135deg, #071427, #0C2442) !important;
}

.gpco-tech-card-media::before {
    content: '01001011 10100101 01011010 10010110 01101001 10110010 01001101 10010101\A10110010 01001011 10010110 01101001 10100101 01011010 10010110 01001101\A01011010 10010101 01101001 10110010 01001011 10010110 01011010 10100101\A10010110 01001101 10110010 01011010 10010101 01101001 10110010 01001011';
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    align-content: center;
    overflow: hidden;
    padding: 14px;
    color: rgba(128, 207, 255, 0.56);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.85;
    letter-spacing: 0.16em;
    white-space: pre;
    text-align: center;
    text-shadow: 0 0 10px rgba(57, 161, 255, 0.18);
    pointer-events: none;
    opacity: 0.58;
    animation: gpcoTechMediaData 5s steps(2, end) infinite;
}

@keyframes gpcoTechMediaData {
    0%, 100% { opacity: 0.5; transform: translateY(0); }
    48% { opacity: 0.72; }
    52% { opacity: 0.34; transform: translateY(-4px); }
}

.gpco-tech-card-image {
    z-index: 2;
    opacity: 0.2;
    mix-blend-mode: screen;
}

.gpco-tech-card-image.is-unavailable {
    opacity: 0;
}

.gpco-tech-card-fallback {
    z-index: 4;
    opacity: 1;
    background: transparent;
}

.gpco-tech-card-fallback i {
    position: relative;
    z-index: 1;
    color: #F4D76A;
    background: rgba(7, 20, 39, 0.72);
    border-color: rgba(128, 207, 255, 0.38);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), 0 0 24px rgba(57, 161, 255, 0.16);
}

.gpco-tech-card-index {
    z-index: 5;
}

[data-theme="light"] #gpco-tech .gpco-tech-binary-layer {
    background:
        linear-gradient(rgba(20, 105, 180, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 105, 180, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(20, 105, 180, 0.09), transparent 62%);
}

[data-theme="light"] .gpco-tech-card-media {
    background:
        radial-gradient(circle at 50% 45%, rgba(57, 161, 255, 0.2), transparent 58%),
        linear-gradient(135deg, #071A32, #10345E) !important;
}

[data-theme="light"] .gpco-tech-card-media::before {
    color: rgba(200, 236, 255, 0.64);
}

@media (max-width: 767px) {
    .gpco-tech-card-media::before {
        padding: 10px;
        font-size: 0.48rem;
        letter-spacing: 0.1em;
        line-height: 1.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gpco-tech .gpco-tech-binary-layer::before,
    #gpco-tech .gpco-tech-binary-layer::after {
        animation: none;
        opacity: 0.05;
        transform: none;
    }

    #gpco-tech .gpco-tech-spotlight,
    .gpco-tech-card-media::before {
        animation: none;
    }
}

/* ============================================================
   GPCO TECH — Full-coverage binary field & coming-soon state
   ============================================================ */
#gpco-tech .gpco-tech-binary-layer::before,
#gpco-tech .gpco-tech-binary-layer::after {
    content: '';
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.046;
    transform: none;
    will-change: background-position, opacity;
}

#gpco-tech .gpco-tech-binary-layer::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='192' viewBox='0 0 288 192'%3E%3Cg fill='%2380CFFF' fill-opacity='.92' font-family='monospace' font-size='11' font-weight='700'%3E%3Ctext x='10' y='20'%3E01001011%3C/text%3E%3Ctext x='124' y='20'%3E10100101%3C/text%3E%3Ctext x='42' y='48'%3E01011010%3C/text%3E%3Ctext x='174' y='48'%3E10010110%3C/text%3E%3Ctext x='8' y='76'%3E01101001%3C/text%3E%3Ctext x='112' y='76'%3E10110010%3C/text%3E%3Ctext x='204' y='76'%3E01001101%3C/text%3E%3Ctext x='54' y='104'%3E10010101%3C/text%3E%3Ctext x='148' y='104'%3E01101010%3C/text%3E%3Ctext x='16' y='132'%3E10100110%3C/text%3E%3Ctext x='108' y='132'%3E01011001%3C/text%3E%3Ctext x='204' y='132'%3E10010011%3C/text%3E%3Ctext x='70' y='160'%3E01100101%3C/text%3E%3Ctext x='168' y='160'%3E10101010%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: 288px 192px;
    animation: gpcoTechBinaryTileDrift 18s linear infinite;
}

#gpco-tech .gpco-tech-binary-layer::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='160' viewBox='0 0 232 160'%3E%3Cg fill='%23E8C54A' fill-opacity='.82' font-family='monospace' font-size='10' font-weight='700'%3E%3Ctext x='18' y='18'%3E10110010%3C/text%3E%3Ctext x='116' y='18'%3E01001101%3C/text%3E%3Ctext x='4' y='42'%3E10010110%3C/text%3E%3Ctext x='98' y='42'%3E01101001%3C/text%3E%3Ctext x='150' y='42'%3E10100101%3C/text%3E%3Ctext x='40' y='66'%3E01011010%3C/text%3E%3Ctext x='132' y='66'%3E10010011%3C/text%3E%3Ctext x='10' y='90'%3E01100101%3C/text%3E%3Ctext x='105' y='90'%3E10101010%3C/text%3E%3Ctext x='176' y='90'%3E01001011%3C/text%3E%3Ctext x='52' y='114'%3E10010101%3C/text%3E%3Ctext x='140' y='114'%3E01101010%3C/text%3E%3Ctext x='18' y='142'%3E10110010%3C/text%3E%3Ctext x='116' y='142'%3E01001101%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: 232px 160px;
    background-position: 116px 80px;
    opacity: 0.034;
    animation: gpcoTechBinaryTileDriftReverse 24s linear infinite;
}

@keyframes gpcoTechBinaryTileDrift {
    0%, 100% {
        background-position: 0 0;
        opacity: 0.046;
    }
    50% {
        background-position: 72px -48px;
        opacity: 0.036;
    }
}

@keyframes gpcoTechBinaryTileDriftReverse {
    0%, 100% {
        background-position: 116px 80px;
        opacity: 0.034;
    }
    50% {
        background-position: 24px 128px;
        opacity: 0.044;
    }
}

.gpco-tech-card.is-coming-soon {
    cursor: not-allowed;
}

.gpco-tech-card.is-coming-soon:hover,
.gpco-tech-card.is-coming-soon:focus-visible {
    color: var(--white-warm);
    border-color: rgba(201, 168, 76, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    outline: none;
    transform: none;
}

.gpco-tech-card.is-coming-soon:hover::after,
.gpco-tech-card.is-coming-soon:focus-visible::after {
    opacity: 0;
    transform: translateX(-115%);
}

.gpco-tech-card.is-coming-soon:hover .gpco-tech-card-image,
.gpco-tech-card.is-coming-soon:focus-visible .gpco-tech-card-image,
.gpco-tech-card.is-coming-soon:hover .gpco-tech-card-link i,
.gpco-tech-card.is-coming-soon:focus-visible .gpco-tech-card-link i {
    transform: none;
}

.gpco-tech-card.is-coming-soon .gpco-tech-card-link {
    opacity: 0.48;
}

.gpco-tech-card.is-coming-soon .gpco-tech-card-content {
    padding-top: 78px;
}

.gpco-tech-soon-stamp {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    color: #FFF8F8;
    font-family: 'Tajawal', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    background: rgba(145, 20, 28, 0.88);
    border: 2px solid #FF6B6B;
    border-radius: 6px;
    outline: 1px solid rgba(255, 225, 225, 0.65);
    outline-offset: 3px;
    box-shadow: 0 8px 18px rgba(94, 13, 19, 0.32);
    transform: rotate(-6deg);
    transform-origin: center;
    pointer-events: none;
}

.gpco-tech-soon-stamp b {
    padding-inline-start: 7px;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.62);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
}

[data-theme="light"] .gpco-tech-card.is-coming-soon:hover,
[data-theme="light"] .gpco-tech-card.is-coming-soon:focus-visible {
    color: var(--theme-text) !important;
    border-color: rgba(15, 39, 71, 0.14);
    box-shadow: 0 14px 34px rgba(15, 39, 71, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .gpco-tech-soon-stamp {
    color: #FFFFFF;
    background: rgba(159, 27, 34, 0.92);
    border-color: #FF7474;
}

@media (max-width: 767px) {
    #gpco-tech .gpco-tech-binary-layer::before {
        background-size: 200px 134px;
    }

    #gpco-tech .gpco-tech-binary-layer::after {
        background-size: 164px 114px;
    }

    .gpco-tech-card.is-coming-soon .gpco-tech-card-content {
        padding-top: 72px;
    }

    .gpco-tech-soon-stamp {
        top: 20px;
        inset-inline-end: 20px;
        padding: 6px 9px;
        font-size: 0.71rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gpco-tech .gpco-tech-binary-layer::before,
    #gpco-tech .gpco-tech-binary-layer::after {
        animation: none;
        opacity: 0.04;
    }
}

/* Full digital canvas inside every GPCO Tech card — intentionally separate
   from the section-wide field so each media frame feels complete on its own. */
.gpco-tech-card-media::before {
    content: '';
    inset: 0;
    display: block;
    padding: 0;
    overflow: hidden;
    opacity: 0.62;
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(111, 208, 255, 0.18) 49%, transparent 51%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='244' height='150' viewBox='0 0 244 150'%3E%3Cg fill='%2398D9FF' fill-opacity='.86' font-family='monospace' font-size='10' font-weight='700' letter-spacing='1'%3E%3Ctext x='8' y='18'%3E01001011%3C/text%3E%3Ctext x='91' y='18'%3E10100101%3C/text%3E%3Ctext x='174' y='18'%3E01101001%3C/text%3E%3Ctext x='31' y='40'%3E10010110%3C/text%3E%3Ctext x='114' y='40'%3E01011010%3C/text%3E%3Ctext x='197' y='40'%3E10110010%3C/text%3E%3Ctext x='7' y='62'%3E01100101%3C/text%3E%3Ctext x='90' y='62'%3E10010011%3C/text%3E%3Ctext x='173' y='62'%3E01001101%3C/text%3E%3Ctext x='30' y='84'%3E10101010%3C/text%3E%3Ctext x='113' y='84'%3E01011001%3C/text%3E%3Ctext x='196' y='84'%3E10010101%3C/text%3E%3Ctext x='7' y='106'%3E01101010%3C/text%3E%3Ctext x='90' y='106'%3E10100110%3C/text%3E%3Ctext x='173' y='106'%3E01001011%3C/text%3E%3Ctext x='30' y='128'%3E10011001%3C/text%3E%3Ctext x='113' y='128'%3E01100110%3C/text%3E%3Ctext x='196' y='128'%3E10101100%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-size: 180% 100%, 244px 150px;
    background-position: 140% 0, 0 0;
    color: transparent;
    text-shadow: none;
}

/* Make the binary data inside card media ascend like the section background */
.gpco-tech-card-media::before {
    animation-name: gpcoTechCardBinaryAscend;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes gpcoTechCardBinaryAscend {
    0% {
        opacity: 0.4;
        background-position: 140% 0, 0 0;
    }
    12% {
        opacity: 0.7;
        background-position: 50% 0, -34px -18px;
    }
    50% {
        opacity: 0.85;
        background-position: 30% 0, -60px -40px;
    }
    88% {
        opacity: 0.6;
        background-position: 10% 0, -80px -60px;
    }
    100% {
        opacity: 0.3;
        background-position: 0% 0, -100px -75px;
    }
}

[data-theme="light"] .gpco-tech-card-media::before {
    opacity: 0.7;
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(220, 184, 69, 0.22) 49%, transparent 51%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='244' height='150' viewBox='0 0 244 150'%3E%3Cg fill='%23BFEAFF' fill-opacity='.9' font-family='monospace' font-size='10' font-weight='700' letter-spacing='1'%3E%3Ctext x='8' y='18'%3E01001011%3C/text%3E%3Ctext x='91' y='18'%3E10100101%3C/text%3E%3Ctext x='174' y='18'%3E01101001%3C/text%3E%3Ctext x='31' y='40'%3E10010110%3C/text%3E%3Ctext x='114' y='40'%3E01011010%3C/text%3E%3Ctext x='197' y='40'%3E10110010%3C/text%3E%3Ctext x='7' y='62'%3E01100101%3C/text%3E%3Ctext x='90' y='62'%3E10010011%3C/text%3E%3Ctext x='173' y='62'%3E01001101%3C/text%3E%3Ctext x='30' y='84'%3E10101010%3C/text%3E%3Ctext x='113' y='84'%3E01011001%3C/text%3E%3Ctext x='196' y='84'%3E10010101%3C/text%3E%3Ctext x='7' y='106'%3E01101010%3C/text%3E%3Ctext x='90' y='106'%3E10100110%3C/text%3E%3Ctext x='173' y='106'%3E01001011%3C/text%3E%3Ctext x='30' y='128'%3E10011001%3C/text%3E%3Ctext x='113' y='128'%3E01100110%3C/text%3E%3Ctext x='196' y='128'%3E10101100%3C/text%3E%3C/g%3E%3C/svg%3E");
    animation-name: gpcoTechCardBinaryAscend;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

[data-theme="light"] .gpco-tech-card-media::before {
    opacity: 0.66;
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(220, 184, 69, 0.2) 49%, transparent 51%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='244' height='150' viewBox='0 0 244 150'%3E%3Cg fill='%23BFEAFF' fill-opacity='.9' font-family='monospace' font-size='10' font-weight='700' letter-spacing='1'%3E%3Ctext x='8' y='18'%3E01001011%3C/text%3E%3Ctext x='91' y='18'%3E10100101%3C/text%3E%3Ctext x='174' y='18'%3E01101001%3C/text%3E%3Ctext x='31' y='40'%3E10010110%3C/text%3E%3Ctext x='114' y='40'%3E01011010%3C/text%3E%3Ctext x='197' y='40'%3E10110010%3C/text%3E%3Ctext x='7' y='62'%3E01100101%3C/text%3E%3Ctext x='90' y='62'%3E10010011%3C/text%3E%3Ctext x='173' y='62'%3E01001101%3C/text%3E%3Ctext x='30' y='84'%3E10101010%3C/text%3E%3Ctext x='113' y='84'%3E01011001%3C/text%3E%3Ctext x='196' y='84'%3E10010101%3C/text%3E%3Ctext x='7' y='106'%3E01101010%3C/text%3E%3Ctext x='90' y='106'%3E10100110%3C/text%3E%3Ctext x='173' y='106'%3E01001011%3C/text%3E%3Ctext x='30' y='128'%3E10011001%3C/text%3E%3Ctext x='113' y='128'%3E01100110%3C/text%3E%3Ctext x='196' y='128'%3E10101100%3C/text%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 767px) {
    .gpco-tech-card-media::before {
        background-size: 180% 100%, 178px 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gpco-tech-card-media::before {
        animation: none;
        opacity: 0.58;
        background-position: 50% 0, 0 0;
    }
}

/* Keep the Sika performance panel deliberately high-contrast in Light Mode. */
[data-theme="light"] .gpco-sika-performance-panel :is(h3, p, span) {
    color: #FFFFFF !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
}

[data-theme="light"] .gpco-sika-performance-panel .grid .grid > div {
    background: rgba(255, 255, 255, 0.12) !important;
}

.gpco-footer-credit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(201, 168, 76, 0.34);
    border-radius: 9999px;
    color: #E8C54A;
    background: rgba(201, 168, 76, 0.06);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    transition: color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, transform 300ms ease-in-out;
}

.gpco-footer-credit:hover,
.gpco-footer-credit:focus-visible {
    color: #0B1B35;
    background: #E8C54A;
    border-color: #E8C54A;
    transform: translateY(-2px);
}

.gpco-footer-credit:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

[data-theme="light"] footer#contact .gpco-footer-credit {
    color: #FFE89A !important;
    border-color: rgba(232, 197, 74, 0.54);
    background: rgba(201, 168, 76, 0.12);
}

[data-theme="light"] footer#contact .gpco-footer-credit:hover,
[data-theme="light"] footer#contact .gpco-footer-credit:focus-visible {
    color: #0B1B35 !important;
    background: #F4D76A;
    border-color: #F4D76A;
}