/* 
    AETHER - Advanced 3D Interactive Agency Theme
*/

:root {
    /* Extreme Glass & Neon Colors */
    --bg-dark: #050508;
    --neon-purple: #7b2cbf;
    --neon-pink: #c77dff;
    --neon-indigo: #3c096c;
    
    --glass-bg: rgba(20, 10, 40, 0.4);
    --glass-border: rgba(123, 44, 191, 0.3);
    
    --text-primary: #ffffff;
    --text-secondary: #b0a8b9;
    
    --font-primary: 'Outfit', 'Cairo', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

a,
button {
    touch-action: manipulation;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-primary);
    overflow-x: hidden;
    /* We handle scroll on the wrapper for 3D */
}

.skip-link {
    position: fixed;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 10000;
    transform: translateY(-140%);
    background: #fff;
    color: #090812;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

html,
.site-wrapper,
main {
    max-width: 100%;
    overflow-x: hidden;
}

/* --- Dynamic Floating BGs --- */
.dynamic-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: hidden;
    z-index: -1;
    background: radial-gradient(circle at 50% 0%, #1a0b2e 0%, var(--bg-dark) 80%);
}
.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 20s infinite ease-in-out alternate;
}
.orb-purple {
    width: 50vw; height: 50vw;
    background: var(--neon-purple);
    top: -10%; left: -20%;
}
.orb-indigo {
    width: 60vw; height: 60vw;
    background: var(--neon-indigo);
    bottom: -20%; right: -20%;
    animation-delay: -5s;
}
@keyframes float {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(10vw, 15vh) scale(1.2); }
}

/* --- Nav --- */
.nav-container {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    width: 90%; max-width: 1400px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 40px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: all 0.5s ease;
}
.logo-container {
    display: flex;
    align-items: center;
    position: relative;
}
.site-logo {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(199, 125, 255, 0.5));
    animation: floatingLogo 4s infinite ease-in-out;
    transform-origin: center;
    transition: all 0.3s ease;
}
.site-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
    cursor: pointer;
}

@keyframes floatingLogo {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
.nav-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}
.icon-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    cursor: pointer;
    width: 45px; height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    position: relative;
    transition: all 0.3s ease;
}
.icon-btn:hover {
    background: var(--neon-purple);
    box-shadow: 0 0 20px var(--neon-purple);
    transform: scale(1.1);
}
.icon-btn i { pointer-events: none; }
.lang-toggle { font-weight: 700; font-family: inherit; font-size: 0.9rem; }

/* Tooltip for 3D mode */
.btn-tooltip {
    position: absolute;
    bottom: -40px;
    background: rgba(0,0,0,0.8);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    border: 1px solid var(--glass-border);
}
.icon-btn:hover .btn-tooltip { opacity: 1; bottom: -50px; }

/* --- Master 3D Isometric Wrapper --- */
.perspective-scene {
    width: 100%;
    min-height: 100vh;
    perspective: 2500px;
    overflow-x: hidden;
}

.site-wrapper {
    width: 100%;
    min-height: 100vh;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: 50% 50%;
    /* Normal state applies no transform */
}

/* THE MAGIC CLASS */
.perspective-scene.is-3d-active .site-wrapper {
    /* Isometric 3D layout tilt */
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(3deg) scale(0.65);
    transform-origin: center top;
}
.perspective-scene.is-3d-active {
    /* REMOVED height:100vh so user can SCROLL the 3D mode! */
    overflow-x: hidden;
    background: #000;
}

/* In 3D mode, the layers pop out */
.perspective-scene.is-3d-active .tilt-card,
.perspective-scene.is-3d-active .hero,
.perspective-scene.is-3d-active .funnel-section,
.perspective-scene.is-3d-active .impact-stats,
.perspective-scene.is-3d-active .process-timeline,
.perspective-scene.is-3d-active .tech-stack-marquee {
    box-shadow: -30px 40px 60px rgba(0,0,0,0.9), 0 0 50px rgba(123, 44, 191, 0.4);
    /* Float off the page */
    transform: translateZ(100px);
    transition: transform 1s cubic-bezier(0.1, 0.9, 0.2, 1), box-shadow 1s;
}
.perspective-scene.is-3d-active .portfolio-overlay {
    transform: translateZ(150px);
}

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    transform-style: preserve-3d;
    transition: transform 1s ease;
}
.hero-content {
    max-width: 900px;
    transform: translateZ(50px);
}
.hero-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--neon-purple);
    border-radius: 30px;
    font-size: 0.9rem;
    color: var(--neon-pink);
    letter-spacing: 0;
    margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(123, 44, 191, 0.4);
}
.hero-title {
    font-size: 5.4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.btn-primary {
    padding: 16px 40px;
    background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink));
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 10px 30px rgba(123, 44, 191, 0.6);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(199, 125, 255, 0.8);
}

/* --- Bento Grid Portfolio (3D Tilting) --- */
.portfolio {
    padding: 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    transform-style: preserve-3d;
}
.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 60px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transform: translateZ(20px);
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    transform-style: preserve-3d;
}
.tilt-card {
    perspective: 1500px;
    aspect-ratio: 16 / 9; /* Perfect natural size for web screenshots */
    width: 100%;
    display: block;
    text-decoration: none;
    height: 100%;
}
.tilt-card-inner {
    width: 100%; height: 100%;
    position: relative;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    /* initial shadow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.portfolio-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: translateZ(0); /* Base layer */
    filter: brightness(0.8);
    transition: 0.5s;
}
.tilt-card:hover .portfolio-img { filter: brightness(1); transform: scale(1.05); }

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,5,8,0.9) 0%, rgba(123,44,191,0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    transform: translateZ(50px); /* PUSHED OUT IN 3D! */
    pointer-events: none;
}
.portfolio-overlay h3 {
    font-size: 1.5rem; color: #fff; margin-bottom: 5px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}
.portfolio-overlay p {
    color: var(--neon-pink); font-size: 1rem;
}

/* --- Advanced 3D Sequential Terminal Funnel --- */
.funnel-section {
    padding: 100px 20px 150px;
    max-width: 900px;
    margin: 0 auto;
    transform-style: preserve-3d;
}
.glass-terminal {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.05);
    overflow: hidden;
    position: relative;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    transform: translateZ(20px);
}
.terminal-header {
    background: rgba(0,0,0,0.4);
    padding: 15px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.dots { display: flex; gap: 8px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; }

.steps-container {
    padding: 40px;
    flex: 1;
    position: relative;
    perspective: 1000px;
}
.setup-step {
    position: absolute;
    top: 40px; left: 40px; right: 40px;
    opacity: 0; pointer-events: none;
    transform: rotateX(-30deg) translateY(50px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.setup-step.active {
    opacity: 1; pointer-events: all;
    transform: rotateX(0) translateY(0);
}
.setup-step.passed {
    opacity: 0;
    transform: rotateX(30deg) translateY(-50px);
}

.setup-step h3 { font-size: 1.8rem; margin-bottom: 30px; text-align: center; }

.action-btn {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}
.action-btn i { font-size: 1.4rem; color: var(--neon-pink); }
.action-btn:hover {
    background: rgba(123, 44, 191, 0.4);
    border-color: var(--neon-pink);
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(123, 44, 191, 0.4);
}
.action-btn.ghost {
    background: transparent; border-color: transparent;
    justify-content: center; color: var(--text-secondary);
}
.action-btn.ghost:hover { background: rgba(255,255,255,0.1); transform: none; }

.final-step { text-align: center; }
.success-icon {
    width: 80px; height: 80px; background: var(--neon-purple); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 20px;
    box-shadow: 0 0 30px var(--neon-purple);
    animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border: none; color: #fff; padding: 18px 30px;
    border-radius: 30px; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: all 0.3s; margin-top: 20px;
    display: inline-flex; align-items: center; gap: 10px;
}
.whatsapp-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6); }

@keyframes popIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Responsiveness */

@media (max-width: 900px) {
    .showroom-container { flex-direction: column; padding: 30px 15px; gap: 20px; border-radius: 20px; }
    
    .showroom-controls { 
        flex: none; 
        width: 100%; 
        flex-direction: row; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        overflow-y: hidden; 
        justify-content: flex-start; 
        padding-bottom: 20px; 
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        gap: 15px;
    }
    .showroom-controls::-webkit-scrollbar { height: 6px; }
    .showroom-controls::-webkit-scrollbar-thumb { background: rgba(199, 125, 255, 0.4); border-radius: 6px; }
    
    .project-btn { 
        flex: 0 0 auto; 
        min-width: 200px; 
        text-align: center; 
        justify-content: center; 
        padding: 15px; 
        scroll-snap-align: start; 
        font-size: 1rem;
        flex-direction: column;
        gap: 5px;
    }
    html[dir="ltr"] .project-btn { flex-direction: column; }
    .custom-project-btn { flex: 0 0 auto; min-width: 200px; text-align: center; justify-content: center; margin-top: 0 !important; scroll-snap-align: start; flex-direction: column; }
    
    .project-btn.active { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(199,125,255,0.1); }
    html[dir="ltr"] .project-btn.active { transform: translateY(-5px); }
    
    .showroom-monitor-wrapper { flex: none; width: 100%; }
    .monitor-3d { 
        transform: none !important; 
        aspect-ratio: auto; 
        height: 60vh; 
        min-height: 450px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 0 2px #1a1a1c, 0 0 0 4px #2b2b2d;
    }
    .monitor-screen { height: 100%; flex: 1; }
    .monitor-screen iframe { height: 100%; width: 100%; min-height: 100%; }
}
/* --- Splash Screen --- */
.splash-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #050508;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease;
    pointer-events: none !important;
}

.splash-screen,
.splash-screen * {
    pointer-events: none !important;
}

.splash-screen.is-hidden {
    display: none !important;
}

section,
#home,
#services,
#portfolio,
#clients,
#pricing,
#testimonials,
#wizard,
#contact,
#faq,
#launch-checklist {
    scroll-margin-top: 160px;
}
.splash-logo {
    width: 250px;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 20px rgba(199, 125, 255, 0.4));
    transition: opacity 0.5s ease;
}
.splash-loader {
    width: 200px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; position: relative; overflow: hidden;
}
.splash-loader::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background: var(--neon-pink);
    animation: loadBar 3s ease-in-out forwards;
}
@keyframes loadBar { 0% { width: 0%; } 100% { width: 100%; } }

.boot-sequence {
    position: absolute; bottom: 30px; right: 30px; text-align: right; 
    font-family: 'Consolas', monospace; font-size: 0.8rem; color: var(--neon-pink); 
    padding-right: 15px; border-right: 2px solid var(--neon-purple); white-space: pre-line;
}
html[dir="ltr"] .boot-sequence { right: auto; left: 30px; text-align: left; border-right: none; border-left: 2px solid var(--neon-purple); padding-right: 0; padding-left: 15px; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(123, 44, 191, 0.8); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-pink); }

/* --- Services / Capabilities --- */
.services, .pricing-section {
    padding: 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.service-icon {
    font-size: 3rem;
    color: var(--neon-pink);
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(199, 125, 255, 0.5);
}

/* --- Tech Stack Marquee --- */
.tech-stack-marquee {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    background: rgba(10, 5, 25, 0.5);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    position: relative;
    transform: translateZ(20px);
}
.marquee-track {
    display: inline-block;
    animation: marquee 20s linear infinite;
}
.marquee-track span { margin: 0 10px 0 30px; font-weight: bold; color: var(--text-secondary); font-size: 1.2rem; }
.marquee-track i { font-size: 1.5rem; color: var(--neon-purple); vertical-align: middle; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- Impact Stats --- */
.impact-stats {
    display: flex;
    justify-content: space-around;
    padding: 80px 20px;
    background: radial-gradient(circle, rgba(123, 44, 191, 0.1), transparent);
    transform-style: preserve-3d;
}
.stat-item { text-align: center; }
.stat-item h3 { font-size: 4rem; color: var(--neon-pink); margin-bottom: 10px; font-family: 'Consolas', monospace; text-shadow: 0 0 20px rgba(199, 125, 255, 0.4); font-weight: bold; }

/* --- Process Timeline --- */
.process-timeline {
    max-width: 1000px; margin: 0 auto; padding: 100px 20px; transform-style: preserve-3d;
}
.timeline-container { position: relative; padding-right: 30px; }
.timeline-container::before {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, var(--neon-purple), var(--neon-pink));
}
html[dir="ltr"] .timeline-container { padding-right: 0; padding-left: 30px; }
html[dir="ltr"] .timeline-container::before { right: auto; left: 0; }
.timeline-item { position: relative; margin-bottom: 50px; }
.timeline-dot {
    position: absolute; right: -40px; top: 0;
    width: 22px; height: 22px; background: var(--bg-dark);
    border: 3px solid var(--neon-pink); border-radius: 50%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: bold; box-shadow: 0 0 15px var(--neon-pink);
}
html[dir="ltr"] .timeline-dot { right: auto; left: -40px; }
.timeline-content {
    background: var(--glass-bg); padding: 30px; border-radius: 20px;
    border: 1px solid var(--glass-border);
}
.timeline-content h3 { color: var(--neon-pink); margin-bottom: 15px; font-size: 1.5rem; }

/* Global Reveal & General Resp ? light motion only (scroll-silk) */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; will-change: auto; }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .nav-container { 
        flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;
        left: 12px; right: 12px; transform: none;
        padding: 8px 12px; border-radius: 50px; gap: 8px; width: auto; max-width: none; top: 15px;
    }
    .logo-container { order: 1; display: flex; justify-content: flex-start; }
    .site-logo { height: 28px; }
    .nav-links { 
        order: 2; width: auto; justify-content: flex-end; gap: 0;
        margin-top: 0; padding-top: 0; border-top: none;
    }
    .nav-links a:not(.nav-btn) { display: none; }
    .nav-links .nav-btn { font-size: 0.78rem; padding: 6px 10px; white-space: nowrap; }
    .nav-controls { order: 3; }
    .icon-btn.lang-toggle { width: 35px; height: 35px; font-size: 0.75rem; }
    .hero-title { font-size: 2.5rem; }
    .impact-stats { flex-direction: column; gap: 40px; }
    .timeline-container { padding-right: 20px; }
    .timeline-container::before { right: 5px; }
    .timeline-dot { right: -5px; }
    html[dir="ltr"] .timeline-container { padding-right: 0; padding-left: 20px; }
    html[dir="ltr"] .timeline-container::before { left: 5px; }
    html[dir="ltr"] .timeline-dot { left: -5px; }
    .bento-grid { grid-template-columns: 1fr; }
    .hero-content { padding-top: 100px; }
}

/* Wizard / Footer Support classes */
.wizard-container, .footer-area { display: block; position: relative; z-index: 10; }
/* --- Advanced 3D Sequential Terminal Funnel --- */
.funnel-section {
    padding: 100px 20px 150px;
    max-width: 900px;
    margin: 0 auto;
    transform-style: preserve-3d;
}
.glass-terminal {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.05);
    overflow: hidden;
    position: relative;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    transform: translateZ(20px);
}
.terminal-header {
    background: rgba(0,0,0,0.4);
    padding: 15px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.dots { display: flex; gap: 8px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; }

.steps-container {
    padding: 40px;
    flex: 1;
    position: relative;
    perspective: 1000px;
}
.setup-step {
    position: absolute;
    top: 40px; left: 40px; right: 40px;
    opacity: 0; pointer-events: none;
    transform: rotateX(-30deg) translateY(50px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.setup-step.active {
    opacity: 1; pointer-events: all;
    transform: rotateX(0) translateY(0);
    position: relative;
    top: 0; left: 0; right: auto;
    width: 100%;
}
.setup-step.passed {
    opacity: 0;
    transform: rotateX(30deg) translateY(-50px);
}

.setup-step h3 { font-size: 1.8rem; margin-bottom: 30px; text-align: center; }

.action-btn {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 1.1rem;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}
.action-btn i { font-size: 1.4rem; color: var(--neon-pink); }
.action-btn:hover {
    background: rgba(123, 44, 191, 0.4);
    border-color: var(--neon-pink);
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(123, 44, 191, 0.4);
}
.action-btn.ghost {
    background: transparent; border-color: transparent;
    justify-content: center; color: var(--text-secondary);
}
.action-btn.ghost:hover { background: rgba(255,255,255,0.1); transform: none; }

.final-step { text-align: center; }
.success-icon {
    width: 80px; height: 80px; background: var(--neon-purple); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin: 0 auto 20px;
    box-shadow: 0 0 30px var(--neon-purple);
    animation: popIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366, #128C7E);
    border: none; color: #fff; padding: 18px 25px;
    border-radius: 30px; font-size: 1.1rem; font-weight: bold;
    cursor: pointer; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: all 0.3s; margin-top: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; white-space: nowrap; max-width: 100%; margin-bottom: 10px;
}
.whatsapp-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6); }

@keyframes popIn {
    0% { transform: scale(0); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.hidden { opacity: 0 !important; pointer-events: none !important; }

.custom-cursor,
.custom-cursor-follower {
    pointer-events: none;
}

.nav-links a,
.icon-btn,
.btn-primary,
.btn-secondary,
.action-btn,
.plan-cta,
.whatsapp-btn,
.planner-option,
.planner-progress-item,
.project-btn,
.contact-badge {
    position: relative;
    z-index: 30;
    pointer-events: auto;
}

/* --- Nav Links --- */
.nav-links { display: flex; gap: 25px; align-items: center; }
.nav-links a {
    color: var(--text-primary); text-decoration: none; font-weight: 600;
    font-size: 1rem; transition: all 0.3s ease; position: relative;
    text-shadow: 0 0 10px rgba(0,0,0,0.5); font-family: var(--font-primary);
}
.nav-links a:hover { color: var(--neon-pink); text-shadow: 0 0 15px rgba(199, 125, 255, 0.8); transform: translateY(-2px); }
.nav-links a::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 0%; height: 2px;
    background: var(--neon-pink); transition: 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links .nav-btn {
    background: rgba(199, 125, 255, 0.1); border: 1px solid var(--neon-purple);
    padding: 8px 20px; border-radius: 20px; color: var(--neon-pink);
    box-shadow: inset 0 0 10px rgba(123, 44, 191, 0.3);
}
.nav-links .nav-btn::after { display: none; }
.nav-links .nav-btn:hover { background: var(--neon-purple); color: #fff; box-shadow: 0 0 20px var(--neon-purple); transform: scale(1.05); }

/* --- Interactive 3D Showroom Desktop --- */
.showroom-container {
    display: flex; gap: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px); border-radius: 30px; padding: 40px; margin-top: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(199, 125, 255, 0.1);
    align-items: center; transform-style: preserve-3d; overflow: visible;
}
.showroom-controls { flex: 0 0 330px; display: flex; flex-direction: column; gap: 12px; z-index: 10; }
.project-btn {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); color: var(--text-secondary);
    padding: 16px 20px; border-radius: 16px; text-align: right; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); display: flex; align-items: center; gap: 15px;
    font-family: var(--font-primary); font-size: 1.05rem; position: relative; overflow: hidden;
}
html[dir="ltr"] .project-btn { text-align: left; }
.project-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-20deg); transition: 0.5s;
}
.project-btn:hover::before { left: 150%; }
.project-btn:hover { background: rgba(123, 44, 191, 0.2); border-color: rgba(199, 125, 255, 0.3); color: #fff; transform: translateX(-10px); }
html[dir="ltr"] .project-btn:hover { transform: translateX(10px); }
.project-btn.active {
    background: rgba(123, 44, 191, 0.6); border-color: var(--neon-pink); color: #fff;
    box-shadow: 0 10px 30px rgba(123, 44, 191, 0.4); transform: translateX(-15px);
}
html[dir="ltr"] .project-btn.active { transform: translateX(15px); }
.project-btn .p-num { font-family: 'Consolas', monospace; font-size: 0.9rem; color: var(--neon-pink); opacity: 0.8; }

.showroom-monitor-wrapper { flex: 1; position: relative; perspective: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 500px; }
.monitor-3d {
    width: 100%; aspect-ratio: 16 / 10; background: #0a0a0c; border-radius: 20px; border: 2px solid #2b2b2d;
    box-shadow: -20px 28px 48px rgba(0,0,0,0.65), inset 0 0 0 4px #1a1a1c;
    transform: rotateX(8deg) rotateY(-12deg) rotateZ(2deg); transform-origin: center;
    transition: transform 0.45s ease; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 2;
    contain: layout paint;
}
.monitor-base {
    position: absolute; bottom: 30px; width: 70%; height: 30px; background: rgba(0,0,0,0.9);
    filter: blur(12px); border-radius: 50%; transform: rotateX(60deg) rotateY(-12deg); z-index: 1;
}
.monitor-glow {
    position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(123,44,191,0.15) 0%, transparent 60%); pointer-events: none; z-index: 0;
}
.monitor-3d.faces-user { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1.05); box-shadow: 0 30px 80px rgba(0,0,0,0.9), 0 0 0 2px #444; z-index: 50; }
.monitor-3d.faces-user .frame-overlay { opacity: 0; pointer-events: none; }
.browser-header { height: 35px; background: #1e1e20; border-bottom: 1px solid #2b2b2d; display: flex; align-items: center; padding: 0 15px; gap: 15px; }
.mac-dots { display: flex; gap: 6px; }
.mac-dots span { width: 10px; height: 10px; border-radius: 50%; }
.mac-dots span:nth-child(1) { background: #ff5f56; }
.mac-dots span:nth-child(2) { background: #ffbd2e; }
.mac-dots span:nth-child(3) { background: #27c93f; }
.browser-url { background: #0a0a0c; flex: 1; height: 22px; border-radius: 6px; font-family: 'Consolas', monospace; font-size: 0.75rem; color: #888; display: flex; align-items: center; padding: 0 10px; border: 1px solid #2b2b2d; max-width: 400px; margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: ltr; }
.monitor-screen { flex: 1; position: relative; background: #000; display: flex; flex-direction: column; }
.monitor-screen iframe { width: 100%; height: 100%; min-height: 100%; border: none; background: #fff; opacity: 0.95; transition: opacity 0.3s; flex: 1; }
.monitor-screen iframe:hover { opacity: 1; }
.frame-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: opacity 0.5s ease; width: 100%; height: 100%; }
.overlay-content { background: rgba(123, 44, 191, 0.9); padding: 15px 30px; border-radius: 30px; color: #fff; font-weight: bold; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(123, 44, 191, 0.4); border: 1px solid rgba(255,255,255,0.2); animation: pulse 2s infinite alternate; }

/* --- Grand Footer --- */
.grand-footer {
    background: linear-gradient(to top, #020205 0%, transparent 100%);
    padding: 100px 50px 30px; border-top: 1px solid rgba(199, 125, 255, 0.1);
    position: relative; overflow: hidden; margin-top: 50px; z-index: 10;
}
.footer-content { 
    max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: minmax(260px, 1.2fr) minmax(280px, 0.9fr) auto; 
    align-items: center; gap: 40px; position: relative; z-index: 2; padding-bottom: 60px;
}
.footer-brand { text-align: left; }
html[dir="rtl"] .footer-brand { text-align: right; }
.footer-logo { width: 220px; filter: drop-shadow(0 0 15px rgba(199, 125, 255, 0.3)); transition: 0.5s; }
.footer-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.5)); }
.footer-brand p { 
    color: var(--text-secondary); max-width: 450px; line-height: 1.8; margin-top: 25px; font-size: 1.1rem; 
}

.footer-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.footer-menu-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-menu-group h4 {
    color: #fff;
    font-size: 0.98rem;
    margin-bottom: 4px;
}

.footer-menu-group a {
    color: rgba(255,255,255,0.58);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    transition: color 0.25s ease, transform 0.25s ease;
}

.footer-menu-group a:hover {
    color: var(--accent-cyan);
    transform: translateX(-4px);
}

html[dir="ltr"] .footer-menu-group a:hover {
    transform: translateX(4px);
}

.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
html[dir="rtl"] .footer-links { align-items: flex-start; }

.contact-badge {
    display: inline-flex; align-items: center; gap: 15px; background: rgba(199, 125, 255, 0.05);
    border: 1px solid rgba(199, 125, 255, 0.3); padding: 12px 25px; border-radius: 50px;
    color: #fff; text-decoration: none; font-size: 1.2rem; transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(10px);
}
.contact-badge:hover {
    background: rgba(123, 44, 191, 0.4); border-color: var(--neon-pink);
    transform: translateY(-5px); box-shadow: 0 15px 40px rgba(123, 44, 191, 0.6);
}
.contact-badge i { color: var(--neon-pink); font-size: 1.4rem; }
.pulse-dot {
    width: 12px; height: 12px; background: #25D366; border-radius: 50%; box-shadow: 0 0 10px #25D366;
    animation: pulseObj 2s infinite;
}
@keyframes pulseObj {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.contact-phone { text-decoration: none; font-weight: bold; font-family: 'Consolas', monospace; direction: ltr; }

.footer-bottom { 
    border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; width: 100%; max-width: 1300px;
    display: flex; justify-content: space-between; align-items: center; margin: 0 auto;
    color: #777; font-size: 0.95rem; position: relative; z-index: 2;
}

@media (max-width: 768px) {
    .grand-footer { padding: 60px 20px 30px; }
    .footer-content { grid-template-columns: 1fr; text-align: center; gap: 34px; padding-bottom: 40px; }
    .footer-brand { text-align: center !important; }
    html[dir="rtl"] .footer-brand { text-align: center !important; }
    .footer-brand p { margin: 20px auto 0; }
    .footer-menu { text-align: center; }
    .footer-links { align-items: center !important; width: 100%; }
    html[dir="rtl"] .footer-links { align-items: center !important; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; font-size: 0.85rem; }
}


@media (max-width: 900px) {
    .showroom-container { flex-direction: column !important; padding: 20px 10px !important; gap: 15px !important; border-radius: 20px !important; }
    .showroom-controls { 
        flex: none !important; width: 100% !important; flex-direction: row !important; flex-wrap: nowrap !important; 
        overflow-x: auto !important; overflow-y: hidden !important; justify-content: flex-start !important; 
        padding-bottom: 10px !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 10px !important;
    }
    .project-btn { 
        flex: 0 0 auto !important; min-width: 180px !important; padding: 12px 15px !important; font-size: 0.9rem !important; 
        flex-direction: column !important; text-align: center !important; justify-content: center !important; gap: 5px !important; scroll-snap-align: start !important; 
    }
    .custom-project-btn { min-width: 180px !important; padding: 12px 15px !important; }
    .showroom-monitor-wrapper { flex: none !important; width: 100% !important; min-height: 350px !important; }
    .monitor-3d { aspect-ratio: auto !important; height: 50vh !important; min-height: 350px !important; transform: none !important; }
}


/* --- Luxury Tilt Cards (Services & Pricing) --- */
.service-card.tilt-card {
    aspect-ratio: auto !important; height: 100%; min-height: 320px;
}
.tilt-card {
    position: relative; perspective: 1000px; transform-style: preserve-3d; border-radius: 24px;
}
.tilt-card-inner {
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(199, 125, 255, 0.15);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(199, 125, 255, 0.05);
    backdrop-filter: blur(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    height: 100%;
}
.tilt-card:hover .tilt-card-inner {
    transform: translateZ(25px) translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(199, 125, 255, 0.15);
    border-color: rgba(199, 125, 255, 0.5);
    background: rgba(25, 15, 40, 0.85);
}
.tilt-card::before {
    content: ''; position: absolute; inset: -2px; border-radius: 26px;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple), transparent, transparent);
    z-index: -1; opacity: 0; transition: opacity 0.5s ease;
}
.tilt-card:hover::before { opacity: 0.6; }
.tilt-card-inner h3 {
    color: #fff; font-size: 1.6rem; margin-bottom: 15px; font-weight: 800; font-family: var(--font-primary);
}
.tilt-card-inner p {
    color: rgba(255, 255, 255, 0.75); line-height: 1.9; font-size: 1.05rem; margin: 0;
}


/* --- Giant Watermark Separator --- */
.giant-watermark {
    width: 100%; text-align: center; overflow: hidden; padding: 0;
    margin: -30px 0 -10px 0; position: relative; z-index: 1; pointer-events: none; user-select: none;
}
.giant-watermark span {
    font-size: 20vw; font-weight: 900; color: rgba(199, 125, 255, 0.02); font-family: var(--font-primary);
    white-space: nowrap; text-transform: uppercase; display: inline-block; line-height: 0.75;
    background: linear-gradient(180deg, rgba(199, 125, 255, 0.04) 0%, transparent 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 50px rgba(199, 125, 255, 0.05));
}
@media (max-width: 768px) {
    .giant-watermark span { font-size: 26vw; }
    .giant-watermark { margin: -10px 0 20px 0; }
}

/* --- 2026 Service & Egyptian Market Packages Refresh --- */
:root {
    --accent-cyan: #36e6d7;
    --accent-green: #34d399;
    --accent-gold: #f5c84c;
    --surface-strong: rgba(12, 18, 24, 0.78);
}

.dynamic-bg {
    background:
        radial-gradient(circle at 15% 15%, rgba(54, 230, 215, 0.14) 0%, transparent 34%),
        radial-gradient(circle at 85% 12%, rgba(245, 200, 76, 0.12) 0%, transparent 30%),
        radial-gradient(circle at 50% 0%, #1a0b2e 0%, var(--bg-dark) 78%);
}

.orb-indigo {
    background: #0f766e;
}

.hero {
    min-height: 86vh;
    padding: 120px 20px 48px;
}

.hero-content {
    max-width: 980px;
    position: relative;
    z-index: 5;
    transform: none;
}

.hero-title {
    max-width: 950px;
    margin-inline: auto;
}

.hero-subtitle {
    max-width: 760px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 60;
    pointer-events: auto;
}

.hero-actions a,
.hero-actions button {
    pointer-events: auto;
}

.btn-secondary {
    padding: 15px 30px;
    border: 1px solid rgba(54, 230, 215, 0.45);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 800;
    background: rgba(54, 230, 215, 0.08);
    box-shadow: inset 0 0 18px rgba(54, 230, 215, 0.1), 0 10px 28px rgba(0,0,0,0.28);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
    background: rgba(54, 230, 215, 0.16);
    box-shadow: 0 12px 32px rgba(54, 230, 215, 0.18);
}

.hero-proof {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-proof span,
.service-micro-list span,
.plan-pill {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.84);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.86rem;
    font-weight: 800;
}

.section-lead {
    max-width: 850px;
    margin: -35px auto 50px;
    color: rgba(255,255,255,0.72);
    text-align: center;
    line-height: 1.9;
    font-size: 1.08rem;
}

.services-grid-expanded {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.service-micro-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.service-card:nth-child(3n + 1) .service-icon { color: var(--accent-cyan); }
.service-card:nth-child(3n + 2) .service-icon { color: var(--accent-gold); }
.service-card:nth-child(3n) .service-icon { color: var(--neon-pink); }

.market-offer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 48px;
    padding: 14px 24px;
    border: 1px solid rgba(245, 200, 76, 0.34);
    border-radius: 999px;
    background: rgba(245, 200, 76, 0.07);
    box-shadow: 0 18px 44px rgba(0,0,0,0.28), inset 0 0 18px rgba(245, 200, 76, 0.06);
    flex-wrap: wrap;
}

.market-offer-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-gold);
    font-weight: 900;
    font-size: 1rem;
}

.currency-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: min(920px, 100%);
    margin: -22px auto 28px;
    padding: 16px 18px 14px;
    border: 1px solid rgba(54, 230, 215, 0.28);
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(54, 230, 215, 0.14), transparent 42%),
        radial-gradient(110% 120% at 100% 0%, rgba(123, 44, 191, 0.16), transparent 46%),
        linear-gradient(160deg, rgba(8, 14, 22, 0.92), rgba(12, 18, 28, 0.88));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 0 18px rgba(54, 230, 215, 0.06);
}

.currency-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.currency-panel-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 900;
}

.currency-panel-copy i {
    color: var(--accent-cyan);
}

.currency-smart-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(54, 230, 215, 0.35);
    background: rgba(54, 230, 215, 0.1);
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.currency-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.currency-chip {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-radius: 14px;
    min-height: 46px;
    padding: 8px 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    font-family: inherit;
}

.currency-chip b {
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.2;
}

.currency-chip small {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 800;
}

.currency-chip:hover {
    border-color: rgba(54, 230, 215, 0.45);
    background: rgba(54, 230, 215, 0.08);
    transform: translateY(-1px);
}

.currency-chip.is-active {
    border-color: rgba(54, 230, 215, 0.7);
    background: linear-gradient(135deg, rgba(54, 230, 215, 0.18), rgba(123, 44, 191, 0.16));
    box-shadow: 0 0 0 1px rgba(54, 230, 215, 0.2), 0 10px 24px rgba(54, 230, 215, 0.12);
}

.currency-chip.is-active small {
    color: rgba(54, 230, 215, 0.92);
}

.currency-more-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: auto;
    max-width: min(320px, 100%);
    z-index: 5;
}

.currency-more-btn {
    appearance: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    min-height: 46px;
    padding: 8px 14px;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.84rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.currency-more-btn i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.currency-more-btn:hover,
.currency-more-btn.is-open,
.currency-more-btn.is-active {
    border-color: rgba(54, 230, 215, 0.4);
    color: #fff;
    background: rgba(54, 230, 215, 0.08);
}

.currency-more-btn.is-open i {
    transform: rotate(180deg);
}

.currency-more-panel {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 8px);
    width: min(300px, calc(100vw - 48px));
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(54, 230, 215, 0.28);
    background: linear-gradient(165deg, rgba(8, 14, 22, 0.98), rgba(12, 18, 28, 0.96));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(54, 230, 215, 0.08);
    z-index: 1200;
}

/* display:flex on .currency-menu must not defeat the HTML hidden attribute */
.currency-menu[hidden],
.currency-more-panel[hidden] {
    display: none !important;
}

.currency-more-label {
    margin: 0 0 8px;
    padding: 0 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    font-weight: 900;
}

.currency-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(54, 230, 215, 0.35) transparent;
}

.currency-menu-item {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.currency-menu-item:hover {
    border-color: rgba(54, 230, 215, 0.28);
    background: rgba(54, 230, 215, 0.08);
}

.currency-menu-item.is-active {
    border-color: rgba(54, 230, 215, 0.55);
    background: linear-gradient(135deg, rgba(54, 230, 215, 0.16), rgba(123, 44, 191, 0.14));
}

.currency-menu-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.currency-menu-item-copy b {
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.25;
}

.currency-menu-item-copy small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.currency-menu-item-code {
    flex-shrink: 0;
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-weight: 900;
}

.currency-dropdown {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.currency-dropdown-trigger {
    appearance: none;
    width: 100%;
    max-width: 320px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(54, 230, 215, 0.36);
    border-radius: 14px;
    padding: 0 14px;
    color: #fff;
    background: rgba(12, 18, 28, 0.92);
    box-shadow: inset 0 0 16px rgba(54, 230, 215, 0.05);
    font-family: inherit;
    font-weight: 900;
    font-size: 0.86rem;
    cursor: pointer;
}

.currency-dropdown-trigger i {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease;
}

.currency-dropdown-trigger.is-open i {
    transform: rotate(180deg);
}

.currency-menu--dropdown {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 8px);
    width: min(300px, 100%);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(54, 230, 215, 0.28);
    background: linear-gradient(165deg, rgba(8, 14, 22, 0.98), rgba(12, 18, 28, 0.96));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    z-index: 1200;
}

.currency-rate-note {
    color: rgba(255, 255, 255, 0.56);
    text-align: start;
    line-height: 1.7;
}

.planner-currency-control {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid rgba(54, 230, 215, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.planner-currency-control span {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.86rem;
    font-weight: 900;
    white-space: nowrap;
}

.planner-currency-control i {
    color: var(--accent-cyan);
}

.countdown-timer {
    display: flex;
    gap: 10px;
    align-items: center;
    direction: ltr;
}

.time-box {
    min-width: 50px;
    text-align: center;
    color: #fff;
}

.time-box span {
    display: block;
    font-family: Consolas, monospace;
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--accent-gold);
}

.time-box small {
    display: block;
    color: rgba(255,255,255,0.68);
    font-size: 0.72rem;
    margin-top: 2px;
}

.time-separator {
    color: var(--accent-gold);
    font-weight: 900;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 26px;
    align-items: stretch;
}

.pricing-card {
    min-height: 100%;
    isolation: isolate;
}

.pricing-card.featured {
    transform: scale(1.03);
    z-index: 10;
}

.pricing-card-inner {
    align-items: flex-start;
    text-align: right;
    padding: 36px 28px;
    background: linear-gradient(180deg, var(--surface-strong), rgba(15, 10, 25, 0.82));
}

html[dir="ltr"] .pricing-card-inner {
    text-align: left;
}

.pricing-card.featured .pricing-card-inner {
    border-color: rgba(54, 230, 215, 0.62);
    box-shadow: 0 0 48px rgba(54, 230, 215, 0.18), 0 22px 55px rgba(0,0,0,0.55);
}

.popular-ribbon {
    position: absolute;
    top: 0;
    inset-inline-start: 28px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
    color: #021012;
    padding: 7px 14px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-weight: 900;
    font-size: 0.82rem;
}

.plan-header {
    width: 100%;
    padding-top: 10px;
}

.featured .plan-header {
    padding-top: 34px;
}

.plan-header h3 {
    font-size: 1.55rem;
    margin: 15px 0 10px;
}

.plan-header p {
    color: rgba(255,255,255,0.72);
    font-size: 0.98rem;
    line-height: 1.8;
}

.plan-price {
    width: 100%;
    margin: 24px 0 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
}

.price-old {
    color: rgba(255,255,255,0.38);
    text-decoration: line-through;
    font-family: Consolas, monospace;
    font-size: 0.95rem;
}

.price-prefix {
    color: rgba(255,255,255,0.62);
    font-size: 0.9rem;
    font-weight: 800;
}

.price-current {
    color: var(--accent-cyan);
    font-family: Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 900;
    white-space: nowrap;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    color: rgba(255,255,255,0.78);
    font-size: 0.98rem;
    line-height: 2.2;
    width: 100%;
}

.plan-features.strong {
    color: #fff;
}

.plan-features li {
    overflow-wrap: anywhere;
}

.plan-cta {
    margin-top: auto;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    min-height: 58px;
    width: 100%;
}

.plan-cta span,
.plan-cta i {
    pointer-events: none;
}

.plan-cta.premium {
    background: rgba(54, 230, 215, 0.16);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(54, 230, 215, 0.22);
}

.pricing-footnote {
    margin: 30px auto 0;
    max-width: 850px;
    color: rgba(255,255,255,0.58);
    line-height: 1.8;
    text-align: center;
    font-size: 0.95rem;
}

.client-wall-section {
    max-width: 1320px;
    margin: 90px auto 0;
    padding: 72px 20px;
    position: relative;
    z-index: 10;
    color: #20233a;
    background: linear-gradient(180deg, #f7f3ea, #fdfbf6);
    border: 1px solid rgba(255,255,255,0.64);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.32);
    overflow: hidden;
}

.client-wall-section::before {
    content: "AETHER";
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(32, 35, 58, 0.035);
    font-size: clamp(5rem, 18vw, 15rem);
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
    white-space: nowrap;
}

html[dir="rtl"] .client-wall-section::before {
    transform: translate(50%, -50%);
}

.client-wall-head {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 850px;
    margin: 0 auto 34px;
}

.client-wall-check {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 999px;
    color: #101725;
    background: linear-gradient(135deg, var(--accent-gold), #ffcf33);
    box-shadow: 0 12px 30px rgba(245, 180, 0, 0.26);
}

.client-wall-head h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 12px;
    color: #233086;
    font-weight: 900;
}

.client-wall-head p {
    color: rgba(32, 35, 58, 0.72);
    line-height: 1.9;
    font-size: 1rem;
}

.client-logo-panels {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 22px;
    max-width: 1060px;
    margin: 0 auto;
}

.client-logo-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 34px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(32, 35, 58, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(28, 24, 18, 0.08);
}

.client-logo-tile {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: #1f2a5f;
    border-radius: 12px;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.client-logo-tile:hover {
    transform: translateY(-3px);
    background: rgba(35, 48, 134, 0.04);
    box-shadow: inset 0 0 0 1px rgba(35, 48, 134, 0.08);
}

.client-logo-tile.featured-client {
    background: linear-gradient(180deg, rgba(35, 48, 134, 0.055), rgba(224, 168, 0, 0.055));
    box-shadow: inset 0 0 0 1px rgba(35, 48, 134, 0.08);
}

.client-logo-tile.featured-client b {
    color: #111b72;
}

.client-logo-tile i {
    color: #e0a800;
    font-size: 1.2rem;
}

.client-logo-tile b {
    display: block;
    color: #233086;
    font-size: 1rem;
    line-height: 1.1;
    font-weight: 900;
}

.client-logo-tile small {
    color: rgba(32, 35, 58, 0.52);
    font-size: 0.75rem;
    font-weight: 900;
}

.client-wall-cta {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: 28px auto 0;
    min-height: 52px;
    padding-inline: 26px;
    text-decoration: none;
    background: linear-gradient(135deg, #e91f4f, #ff3d5f);
    border-color: rgba(255,255,255,0.24);
    color: #fff;
    box-shadow: 0 16px 34px rgba(233, 31, 79, 0.26);
}

.market-map {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 34px 0 0;
}

.market-map-card {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 22px;
    background: rgba(255,255,255,0.045);
    text-align: right;
}

html[dir="ltr"] .market-map-card {
    text-align: left;
}

.market-map-card i {
    color: var(--accent-gold);
    font-size: 1.45rem;
    margin-bottom: 14px;
}

.market-map-card h3 {
    font-size: 1.12rem;
    margin-bottom: 10px;
}

.market-map-card p {
    color: rgba(255,255,255,0.68);
    line-height: 1.8;
    font-size: 0.95rem;
}

.enterprise-section,
.testimonials-section,
.comparison-section,
.faq-section,
.launch-checklist-section,
.final-cta-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 100px 20px 0;
    position: relative;
    z-index: 10;
}

.enterprise-grid,
.testimonial-grid,
.comparison-grid {
    display: grid;
    gap: 18px;
}

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

.enterprise-card,
.testimonial-card,
.comparison-card {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.045);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.28), inset 0 0 18px rgba(255,255,255,0.025);
}

.enterprise-card i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 18px;
    color: var(--accent-cyan);
    background: rgba(54, 230, 215, 0.1);
    border: 1px solid rgba(54, 230, 215, 0.24);
    font-size: 1.25rem;
}

.enterprise-card h3,
.comparison-card h3 {
    color: #fff;
    font-weight: 900;
}

.enterprise-card h3,
.comparison-card h3 {
    margin-bottom: 10px;
    font-size: 1.14rem;
}

.enterprise-card p,
.testimonial-card p,
.comparison-card li,
.faq-list p,
.final-cta-copy p,
.testimonial-cta-copy p {
    color: rgba(255,255,255,0.68);
    line-height: 1.85;
    font-size: 0.96rem;
}

.sector-lanes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.sector-lanes span {
    border: 1px solid rgba(245, 200, 76, 0.28);
    color: rgba(255,255,255,0.82);
    background: rgba(245, 200, 76, 0.06);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    font-size: 0.9rem;
}

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

.testimonial-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.real-review-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 20px;
    min-height: auto;
    border-color: rgba(54, 230, 215, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(11, 9, 19, 0.78));
}

.testimonial-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(54, 230, 215, 0.12), transparent 34%);
    pointer-events: none;
}

.testimonial-photo {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(54, 230, 215, 0.34);
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 14px 30px rgba(0,0,0,0.35), 0 0 18px rgba(54, 230, 215, 0.14);
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.95) contrast(1.04) brightness(0.9);
    transform: scale(1.02);
}

.testimonial-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 3, 9, 0), rgba(4, 3, 9, 0.62));
    pointer-events: none;
}

.testimonial-photo span {
    position: absolute;
    inset-inline-start: 5px;
    bottom: 5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 3px 6px;
    color: rgba(255,255,255,0.9);
    background: rgba(7, 8, 13, 0.66);
    backdrop-filter: blur(12px);
    font-weight: 900;
    font-size: 0.58rem;
}

.testimonial-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
}

.testimonial-meta,
.testimonial-proof {
    position: relative;
    z-index: 2;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.real-review-card .testimonial-meta {
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #061012;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold));
    font-weight: 900;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.testimonial-meta strong {
    display: block;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
}

.testimonial-meta small {
    display: block;
    color: rgba(255,255,255,0.56);
    margin-top: 4px;
    line-height: 1.5;
}

.review-stars {
    color: var(--accent-gold);
    letter-spacing: 2px;
    font-size: 0.95rem;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.real-review-card .review-stars {
    flex: 0 0 auto;
    margin: 2px 0 0;
    white-space: nowrap;
    font-size: 0.82rem;
}

.testimonial-card p {
    flex: 1;
    margin-bottom: 22px;
    font-size: 1rem;
    position: relative;
    z-index: 2;
}

.real-review-card p {
    flex: 0 0 auto;
    margin-bottom: 12px;
    font-size: 0.94rem;
    line-height: 1.75;
}

.testimonial-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: auto 0 16px;
}

.testimonial-detail-grid span {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px;
    background: rgba(255,255,255,0.045);
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    font-size: 0.8rem;
}

.testimonial-detail-grid b {
    color: var(--accent-cyan);
    font-weight: 900;
    font-style: normal;
}

.testimonial-detail-grid em {
    color: rgba(255,255,255,0.82);
    font-style: normal;
    font-weight: 800;
}

.testimonial-proof {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    max-width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(54, 230, 215, 0.28);
    border-radius: 999px;
    color: rgba(255,255,255,0.88);
    background: rgba(54, 230, 215, 0.08);
    font-weight: 900;
    font-size: 0.86rem;
}

.testimonial-proof i {
    color: var(--accent-cyan);
}

.testimonial-cta-strip,
.final-cta-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border: 1px solid rgba(54, 230, 215, 0.24);
    background: linear-gradient(135deg, rgba(54, 230, 215, 0.09), rgba(123, 44, 191, 0.12));
    border-radius: 24px;
    padding: 24px;
    margin-top: 24px;
}

.testimonial-cta-copy strong {
    display: block;
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 6px;
}

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

.comparison-card {
    min-height: 300px;
}

.comparison-card.highlighted {
    border-color: rgba(54, 230, 215, 0.48);
    background: linear-gradient(180deg, rgba(54, 230, 215, 0.11), rgba(15, 10, 25, 0.74));
    box-shadow: 0 0 42px rgba(54, 230, 215, 0.14), 0 18px 42px rgba(0,0,0,0.32);
}

.comparison-card.muted {
    opacity: 0.86;
}

.comparison-card ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.comparison-card li {
    position: relative;
    padding-inline-start: 24px;
    margin-bottom: 14px;
}

.comparison-card li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.75em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.26);
}

.comparison-card.highlighted li::before {
    background: var(--accent-cyan);
    box-shadow: 0 0 14px rgba(54, 230, 215, 0.6);
}

.launch-checklist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.launch-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 82px;
    padding: 16px;
    border: 1px solid rgba(54, 230, 215, 0.18);
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.82);
    font-weight: 900;
    line-height: 1.55;
}

.launch-check-item i {
    color: var(--accent-cyan);
    font-size: 1.08rem;
    flex: 0 0 auto;
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
}

/* GEO / AEO entity block ? citation-friendly facts */
.geo-entity {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto 4rem;
    padding: 2.5rem 1.5rem 1rem;
}

.geo-entity .section-title {
    margin-bottom: 1rem;
}

.geo-definition,
.geo-quote,
.geo-who {
    color: rgba(232, 240, 245, 0.88);
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 1rem;
    max-width: 52rem;
}

.geo-quote {
    border-inline-start: 3px solid rgba(94, 234, 212, 0.55);
    padding-inline-start: 1rem;
    color: rgba(232, 240, 245, 0.95);
    font-weight: 600;
}

.geo-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 1.5rem 0 1.25rem;
    padding: 0;
}

.geo-facts > div {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
}

.geo-facts dt {
    margin: 0 0 6px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(94, 234, 212, 0.85);
    font-weight: 800;
}

.geo-facts dd {
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.98rem;
}

.geo-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.25rem;
}

.geo-anchors a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(232, 240, 245, 0.92);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.geo-anchors a:hover {
    border-color: rgba(94, 234, 212, 0.45);
    color: #5eead4;
    background: rgba(94, 234, 212, 0.06);
}

@media (max-width: 720px) {
    .geo-facts {
        grid-template-columns: 1fr;
    }

    .geo-entity {
        margin-bottom: 2.5rem;
        padding-top: 1.5rem;
    }
}

.faq-list details {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.045);
    border-radius: 18px;
    padding: 18px 20px;
}

.faq-list summary {
    cursor: pointer;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::after {
    content: "+";
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--accent-cyan);
    border: 1px solid rgba(54, 230, 215, 0.28);
    background: rgba(54, 230, 215, 0.08);
    font-family: Consolas, monospace;
}

.faq-list details[open] summary::after {
    content: "-";
}

.faq-list p {
    margin-top: 14px;
}

.final-cta-section {
    margin-top: 100px;
    padding: 32px;
}

.final-cta-copy span {
    color: var(--accent-gold);
    font-weight: 900;
}

.final-cta-copy h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.25;
    margin: 8px 0 12px;
}

.final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

html[dir="ltr"] .final-cta-actions {
    justify-content: flex-start;
}

.sticky-conversion-dock {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 990;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 999px;
    background: rgba(8, 8, 14, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 0 18px rgba(255,255,255,0.04);
    pointer-events: none;
}

.sticky-conversion-dock .dock-action {
    pointer-events: auto;
}

.dock-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 0 16px;
    color: #fff;
    background: rgba(255,255,255,0.05);
    text-decoration: none;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.dock-action.primary {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    border-color: rgba(199, 125, 255, 0.4);
}

.dock-action.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.35);
}

.dock-action.whatsapp i {
    color: #25D366;
}

.dock-action.icon-only {
    width: 42px;
    padding: 0;
}

@media (max-width: 900px) {
    .hero-title { font-size: 4rem; }
    .pricing-card.featured { transform: none; }
    .services-grid-expanded { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
    .client-logo-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .enterprise-grid,
    .testimonial-grid,
    .comparison-grid,
    .launch-checklist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .final-cta-section,
    .testimonial-cta-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 82vh;
        padding: 110px 18px 42px;
    }
    .hero-badge {
        display: block;
        width: calc(100vw - 44px);
        max-width: calc(100vw - 44px);
        margin-inline: auto;
        padding-inline: 10px;
        white-space: normal;
        line-height: 1.6;
    }
    .hero-title {
        font-size: 1.95rem;
        width: calc(100vw - 36px);
        max-width: calc(100vw - 36px);
        margin-inline: auto;
        overflow-wrap: anywhere;
    }
    .hero-subtitle {
        font-size: 0.98rem;
        width: calc(100vw - 38px);
        max-width: calc(100vw - 38px);
        margin-inline: auto;
    }
    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 320px;
        text-align: center;
        padding-inline: 18px;
    }
    .hero-proof {
        max-width: calc(100vw - 36px);
        margin-inline: auto;
    }
    .hero-proof span { font-size: 0.76rem; }
    .section-lead {
        margin-top: -35px;
        font-size: 0.98rem;
    }
    .market-offer {
        border-radius: 22px;
        width: 100%;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .market-map {
        grid-template-columns: 1fr;
    }
    .enterprise-section,
    .client-wall-section,
    .testimonials-section,
    .comparison-section,
    .faq-section,
    .launch-checklist-section,
    .final-cta-section {
        padding: 64px 14px 0;
    }
    .client-wall-section {
        margin-top: 64px;
        padding: 48px 14px;
        border-radius: 22px;
    }
    .client-logo-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 18px;
    }
    .client-logo-tile {
        min-height: 68px;
    }
    .client-logo-tile b {
        font-size: 0.9rem;
    }
    .enterprise-grid,
    .testimonial-grid,
    .comparison-grid,
    .launch-checklist-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .enterprise-card,
    .testimonial-card,
    .comparison-card {
        border-radius: 18px;
        padding: 20px;
    }
    .testimonial-card {
        min-height: auto;
    }
    .real-review-card {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }
    .testimonial-photo {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }
    .real-review-card .testimonial-meta {
        flex-direction: column;
        gap: 6px;
    }
    .testimonial-detail-grid {
        grid-template-columns: 1fr;
    }
    .testimonial-cta-strip,
    .final-cta-section {
        border-radius: 18px;
        padding: 20px;
    }
    .sticky-conversion-dock {
        width: calc(100% - 24px);
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        justify-content: center;
        border-radius: 18px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(8, 8, 14, 0.96);
    }
    .dock-action {
        flex: 1;
        padding: 0 10px;
        font-size: 0.86rem;
    }
    .dock-action.icon-only {
        flex: 0 0 42px;
    }
    .final-cta-actions,
    .final-cta-actions .btn-primary,
    .final-cta-actions .btn-secondary,
    .testimonial-cta-strip .action-btn {
        width: 100%;
    }
    .pricing-card-inner {
        padding: 32px 22px;
    }
    .price-current {
        font-size: 1.45rem;
    }
}

/* --- Smart Planner / Quote Builder --- */
.smart-planner {
    max-width: 1320px;
    padding-top: 100px;
}

.planner-shell {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
}

.planner-sidebar,
.planner-main {
    background: rgba(10, 12, 20, 0.72);
    border: 1px solid rgba(54, 230, 215, 0.18);
    border-radius: 24px;
    backdrop-filter: blur(24px);
    box-shadow: 0 22px 55px rgba(0,0,0,0.45), inset 0 0 24px rgba(54, 230, 215, 0.04);
}

.planner-sidebar {
    padding: 22px;
    position: sticky;
    top: 130px;
    align-self: start;
}

.planner-score {
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(54, 230, 215, 0.12), rgba(199, 125, 255, 0.12));
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 18px;
}

.planner-score span,
.planner-score small {
    display: block;
    color: rgba(255,255,255,0.68);
    font-size: 0.9rem;
}

.planner-score strong {
    display: block;
    color: var(--accent-cyan);
    font-family: Consolas, monospace;
    font-size: 1.25rem;
    margin: 8px 0;
}

.planner-progress {
    display: grid;
    gap: 9px;
}

.planner-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    color: rgba(255,255,255,0.72);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    text-align: inherit;
    font-family: inherit;
    transition: all 0.25s ease;
}

.planner-progress-item span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    color: var(--accent-cyan);
    font-family: Consolas, monospace;
    font-weight: 900;
    flex: 0 0 auto;
}

.planner-progress-item b {
    font-size: 0.92rem;
}

.planner-progress-item.active,
.planner-progress-item.completed {
    border-color: rgba(54, 230, 215, 0.42);
    color: #fff;
    background: rgba(54, 230, 215, 0.09);
}

.planner-progress-item.active span {
    background: var(--accent-cyan);
    color: #061214;
}

.planner-main {
    padding: 30px;
    min-height: 650px;
    display: flex;
    flex-direction: column;
}

.planner-step {
    display: none;
    animation: plannerFade 0.35s ease;
}

.planner-step.active {
    display: block;
}

@keyframes plannerFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.planner-step-head {
    margin-bottom: 24px;
}

.planner-step-head span {
    display: inline-flex;
    color: var(--accent-gold);
    font-weight: 900;
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.planner-step-head h3 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.planner-step-head p {
    color: rgba(255,255,255,0.68);
    line-height: 1.85;
    max-width: 780px;
}

.option-grid {
    display: grid;
    gap: 14px;
}

.option-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.option-grid.chips {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.option-grid.stack {
    grid-template-columns: 1fr;
}

.planner-option {
    min-height: 82px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    color: #fff;
    padding: 16px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
    transition: all 0.25s ease;
}

html[dir="ltr"] .planner-option {
    text-align: left;
}

.planner-option i {
    color: var(--accent-cyan);
    font-size: 1.35rem;
    width: 32px;
    text-align: center;
    flex: 0 0 auto;
}

.planner-option:hover {
    transform: translateY(-3px);
    border-color: rgba(54, 230, 215, 0.38);
    background: rgba(54, 230, 215, 0.08);
}

.planner-option.active {
    border-color: var(--accent-cyan);
    background: rgba(54, 230, 215, 0.13);
    box-shadow: 0 15px 36px rgba(54, 230, 215, 0.12), inset 0 0 20px rgba(54, 230, 215, 0.08);
}

.planner-option.multi {
    min-height: 58px;
    justify-content: center;
    text-align: center;
    border-radius: 999px;
    padding: 12px 14px;
}

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

.split-options h4 {
    color: var(--accent-cyan);
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.planner-result {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.result-card {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 18px;
    background: rgba(255,255,255,0.045);
}

.result-card h4 {
    color: rgba(255,255,255,0.66);
    margin-bottom: 8px;
}

.result-card strong {
    display: block;
    color: var(--accent-cyan);
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.result-card p {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
}

.whatsapp-preview {
    width: 100%;
    min-height: 300px;
    resize: vertical;
    border: 1px solid rgba(54, 230, 215, 0.24);
    border-radius: 18px;
    background: rgba(0,0,0,0.32);
    color: rgba(255,255,255,0.86);
    padding: 18px;
    font-family: "Cairo", Consolas, monospace;
    line-height: 1.75;
    direction: rtl;
}

html[dir="ltr"] .whatsapp-preview {
    direction: ltr;
}

.planner-actions,
.planner-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.planner-actions {
    margin-top: 16px;
}

.planner-actions .action-btn,
.planner-actions .whatsapp-btn {
    width: auto;
}

.planner-nav {
    margin-top: auto;
    padding-top: 26px;
    justify-content: space-between;
}

.planner-nav .action-btn {
    width: auto;
    min-width: 150px;
    justify-content: center;
}

@media (max-width: 980px) {
    .planner-shell {
        grid-template-columns: 1fr;
    }
    .planner-sidebar {
        position: relative;
        top: 0;
    }
    .planner-progress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .planner-progress-item {
        flex-direction: column;
        text-align: center;
    }
    .planner-progress-item b {
        font-size: 0.78rem;
    }
}

@media (max-width: 768px) {
    .smart-planner {
        padding-inline: 14px;
    }
    .planner-sidebar,
    .planner-main {
        border-radius: 18px;
        padding: 16px;
    }
    .planner-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .planner-step-head h3 {
        font-size: 1.45rem;
    }
    .option-grid.compact,
    .option-grid.chips,
    .split-options,
    .planner-result {
        grid-template-columns: 1fr;
    }
    .planner-option {
        min-height: 68px;
        font-size: 0.92rem;
    }
    .planner-actions .action-btn,
    .planner-actions .whatsapp-btn,
    .planner-nav .action-btn {
        width: 100%;
    }
    .planner-nav {
        flex-direction: column-reverse;
    }
    .whatsapp-preview {
        min-height: 360px;
        font-size: 0.9rem;
    }
}

/* --- Responsive polish pass: premium mobile and desktop framing --- */
.nav-container {
    width: min(1180px, calc(100% - 48px));
    min-height: 74px;
    padding: 10px 24px;
}

.logo-container {
    gap: 10px;
}

.brand-word {
    color: #fff;
    font-family: "Outfit", "Cairo", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0;
}

.site-logo {
    height: 48px;
}

.nav-links {
    gap: 18px;
}

.nav-links a {
    font-size: 0.95rem;
}

.nav-links .nav-btn {
    min-width: 118px;
    text-align: center;
}

.hero {
    min-height: min(88vh, 900px);
    padding: 132px 24px 72px;
}

.hero-content {
    max-width: 920px;
    position: relative;
    z-index: 5;
    transform: none;
}

.hero-badge {
    margin-bottom: 20px;
}

.hero-title {
    font-size: 4.65rem;
    line-height: 1.04;
    margin-bottom: 22px;
}

.hero-subtitle {
    margin-bottom: 30px;
}

.btn-primary,
.btn-secondary {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-title {
    max-width: 950px;
    margin: 0 auto 24px;
    line-height: 1.18;
}

.section-lead {
    margin: 0 auto 44px;
}

.services,
.pricing-section {
    width: min(100% - 40px, 1240px);
    padding: 90px 0;
}

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

.tilt-card-inner,
.pricing-card-inner,
.market-map-card,
.timeline-content,
.planner-sidebar,
.planner-main {
    border-radius: 18px;
}

@media (max-width: 1180px) {
    .hero-title {
        font-size: 3.9rem;
    }

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

    .nav-container {
        width: calc(100% - 32px);
    }
}

@media (max-width: 768px) {
    html,
    body,
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    *::-webkit-scrollbar,
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    html {
        scroll-padding-top: 92px;
    }

    body {
        background:
            radial-gradient(circle at 50% 0%, rgba(123, 44, 191, 0.28), transparent 42%),
            var(--bg-dark);
    }

    .dynamic-bg {
        background:
            radial-gradient(circle at 14% 4%, rgba(54, 230, 215, 0.15) 0%, transparent 34%),
            radial-gradient(circle at 86% 14%, rgba(245, 200, 76, 0.1) 0%, transparent 30%),
            linear-gradient(180deg, #150821 0%, #050508 74%);
    }

    .bg-orb {
        display: none;
    }

    .nav-container {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 52px;
        align-items: center;
        direction: ltr;
        top: 12px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-width: 640px;
        min-height: 64px;
        padding: 8px 10px;
        border-radius: 24px;
        background: rgba(12, 9, 22, 0.82);
        border-color: rgba(199, 125, 255, 0.24);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), inset 0 0 18px rgba(199, 125, 255, 0.06);
    }

    .nav-controls {
        grid-column: 1;
        grid-row: 1;
        order: initial;
        justify-content: flex-start;
        gap: 0;
    }

    .nav-links {
        grid-column: 2;
        grid-row: 1;
        order: initial;
        justify-content: center;
        width: 100%;
        min-width: 0;
    }

    .logo-container {
        grid-column: 3;
        grid-row: 1;
        order: initial;
        justify-content: flex-end;
        min-width: 0;
    }

    .brand-word {
        display: none;
    }

    .site-logo {
        height: 42px;
        max-width: 42px;
        object-fit: contain;
    }

    .icon-btn.lang-toggle {
        width: 40px;
        height: 40px;
        font-size: 0.78rem;
        background: rgba(255, 255, 255, 0.07);
    }

    .nav-links a:not(.nav-btn) {
        display: none;
    }

    .nav-links .nav-btn {
        min-width: 126px;
        max-width: 100%;
        padding: 10px 18px;
        border-radius: 18px;
        font-size: 0.95rem;
        line-height: 1.1;
        color: #fff;
        background: linear-gradient(135deg, rgba(123, 44, 191, 0.72), rgba(199, 125, 255, 0.28));
        box-shadow: inset 0 0 18px rgba(255,255,255,0.08), 0 8px 22px rgba(123, 44, 191, 0.26);
    }

    .hero {
        min-height: auto;
        justify-content: flex-start;
        padding: 104px 16px 52px;
    }

    .hero-content {
        width: 100%;
        max-width: 540px;
        padding-top: 0;
    }

    .hero-badge {
        width: 100%;
        max-width: 420px;
        margin: 0 auto 18px;
        padding: 12px 16px;
        border-radius: 22px;
        font-size: 0.98rem;
        line-height: 1.55;
        background: rgba(255, 255, 255, 0.045);
    }

    .hero-title {
        width: 100%;
        max-width: 420px;
        font-size: 2.35rem;
        line-height: 1.12;
        margin: 0 auto 18px;
        text-wrap: balance;
    }

    .hero-subtitle {
        width: 100%;
        max-width: 430px;
        font-size: 1rem;
        line-height: 1.75;
        margin: 0 auto 24px;
        color: rgba(255,255,255,0.7);
    }

    .hero-actions {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        gap: 12px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: none;
        min-height: 58px;
        padding: 14px 18px;
        border-radius: 22px;
        font-size: 1.05rem;
        line-height: 1.2;
        box-shadow: 0 10px 26px rgba(123, 44, 191, 0.36);
    }

    .btn-secondary {
        box-shadow: inset 0 0 16px rgba(54, 230, 215, 0.08), 0 10px 24px rgba(0,0,0,0.22);
    }

    .hero-proof {
        max-width: 390px;
        margin: 18px auto 0;
        gap: 8px;
    }

    .hero-proof span {
        font-size: 0.78rem;
        padding: 7px 10px;
    }

    .giant-watermark {
        display: none;
    }

    .section-title {
        max-width: 430px;
        font-size: 1.85rem;
        line-height: 1.28;
        margin-bottom: 14px;
        padding-inline: 2px;
    }

    .section-lead {
        max-width: 440px;
        margin: 0 auto 28px;
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .services,
    .pricing-section {
        width: 100%;
        padding: 48px 16px 64px;
    }

    .services-grid,
    .services-grid-expanded,
    .pricing-grid,
    .market-map {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card.tilt-card {
        min-height: auto;
    }

    .tilt-card-inner,
    .pricing-card-inner {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .tilt-card-inner h3,
    .plan-header h3 {
        font-size: 1.28rem;
        line-height: 1.35;
    }

    .tilt-card-inner p,
    .plan-header p,
    .plan-features,
    .market-map-card p {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .service-icon {
        font-size: 2.2rem;
        margin-bottom: 14px;
    }

    .market-offer {
        width: 100%;
        margin-bottom: 28px;
        padding: 14px;
        border-radius: 18px;
        gap: 12px;
    }

    .market-offer-copy {
        justify-content: center;
        text-align: center;
        font-size: 0.93rem;
    }

    .currency-panel {
        margin: -10px auto 24px;
        padding: 14px;
        border-radius: 18px;
    }

    .currency-panel-head {
        justify-content: center;
        text-align: center;
    }

    .currency-panel-copy {
        justify-content: center;
        width: 100%;
    }

    .currency-smart-badge {
        margin-inline: auto;
    }

    .currency-chip-row {
        justify-content: center;
    }

    .currency-chip {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 0;
        align-items: center;
        text-align: center;
    }

    .currency-more-wrap {
        flex: 1 1 calc(33.333% - 8px);
        max-width: none;
        align-items: stretch;
    }

    .currency-more-btn {
        align-self: stretch;
        width: 100%;
        justify-content: center;
    }

    .currency-more-panel {
        inset-inline: auto 0;
        width: min(300px, calc(100vw - 32px));
    }

    .currency-rate-note {
        text-align: center;
    }

    .currency-dropdown-trigger {
        max-width: 100%;
    }

    .countdown-timer {
        justify-content: center;
        width: 100%;
    }

    .time-box {
        min-width: 42px;
    }

    .price-current {
        font-size: 1.36rem;
    }

    .plan-cta {
        min-height: 52px;
        padding: 14px 16px;
        font-size: 0.98rem;
    }

    .market-map-card {
        padding: 18px;
        border-radius: 18px;
    }

    .tech-stack-marquee {
        padding: 24px 0;
    }

    .marquee-track span {
        font-size: 1rem;
    }

    .impact-stats {
        padding: 52px 16px;
        gap: 28px;
    }

    .stat-item h3 {
        font-size: 2.55rem;
    }

    .process-timeline {
        padding: 64px 16px;
    }

    .timeline-content {
        padding: 20px;
        border-radius: 18px;
    }

    .timeline-content h3 {
        font-size: 1.22rem;
    }

    .interactive-portfolio {
        padding: 64px 12px !important;
        margin-top: 0 !important;
    }

    .showroom-container {
        padding: 16px 10px !important;
        border-radius: 18px !important;
    }

    .showroom-monitor-wrapper {
        min-height: 300px !important;
    }

    .monitor-3d {
        height: 46vh !important;
        min-height: 300px !important;
        border-radius: 18px !important;
    }

    .smart-planner {
        padding: 64px 12px !important;
    }

    .planner-shell {
        gap: 14px;
    }

    .planner-sidebar,
    .planner-main {
        padding: 14px;
        border-radius: 18px;
    }

    .planner-score {
        padding: 16px;
        margin-bottom: 12px;
    }

    .planner-progress {
        gap: 8px;
    }

    .planner-progress-item {
        padding: 8px;
        border-radius: 12px;
    }

    .planner-progress-item span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .planner-main {
        min-height: auto;
    }

    .planner-step-head {
        margin-bottom: 18px;
    }

    .planner-step-head h3 {
        font-size: 1.42rem;
        line-height: 1.35;
    }

    .planner-step-head p {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .planner-option {
        min-height: 58px;
        padding: 13px 14px;
        border-radius: 16px;
        font-size: 0.92rem;
    }

    .planner-option.multi {
        border-radius: 16px;
    }

    .planner-actions,
    .planner-nav {
        gap: 10px;
    }

    .whatsapp-btn {
        min-height: 54px;
        margin-top: 8px;
        border-radius: 18px;
        font-size: 0.98rem;
        white-space: normal;
    }

    .grand-footer {
        padding: 54px 16px 28px;
    }
}

@media (max-width: 420px) {
    .nav-container {
        grid-template-columns: 40px minmax(0, 1fr) 46px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        min-height: 60px;
        padding: 7px 8px;
    }

    .site-logo {
        height: 38px;
        max-width: 38px;
    }

    .icon-btn.lang-toggle {
        width: 36px;
        height: 36px;
    }

    .nav-links .nav-btn {
        min-width: 112px;
        padding: 9px 14px;
        font-size: 0.88rem;
    }

    .hero {
        padding-top: 94px;
        padding-inline: 12px;
    }

    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .hero-actions,
    .hero-proof {
        max-width: calc(100vw - 36px);
    }

    .hero-title {
        font-size: 1.86rem;
        line-height: 1.16;
    }

    .hero-subtitle {
        font-size: 0.94rem;
    }

    .btn-primary,
    .btn-secondary {
        min-height: 54px;
        font-size: 0.98rem;
    }

    .section-title {
        font-size: 1.62rem;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   AETHER global-v5 ? background-image frames (no <img> hover affordances)
   ??????????????????????????????????????????????????????????????????????????? */
:root {
    --aether-ink: #07090c;
    --aether-steel: #8b9aab;
    --aether-teal: #2dd4bf;
    --aether-teal-deep: #0f766e;
    --aether-mist: rgba(232, 238, 244, 0.78);
}

.dynamic-bg {
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(45, 212, 191, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(139, 154, 171, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0a0e13 0%, var(--aether-ink) 55%, #050608 100%);
}

.orb-purple,
.orb-indigo {
    display: none;
}

.orb-teal {
    width: 55vw;
    height: 55vw;
    max-width: 720px;
    max-height: 720px;
    background: var(--aether-teal-deep);
    top: -18%;
    inset-inline-start: -12%;
    opacity: 0.35;
    filter: blur(100px);
    animation: aetherOrbDrift 28s ease-in-out infinite alternate;
}

.orb-steel {
    width: 48vw;
    height: 48vw;
    max-width: 640px;
    max-height: 640px;
    background: #334155;
    bottom: -22%;
    inset-inline-end: -14%;
    opacity: 0.4;
    filter: blur(110px);
    animation: aetherOrbDrift 34s ease-in-out infinite alternate-reverse;
}

@keyframes aetherOrbDrift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6vw, 8vh) scale(1.12); }
}

.hero.hero-v1,
.hero.hero-editorial {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: start;
    padding: 110px clamp(18px, 4vw, 56px) 64px;
    overflow: hidden;
}

.hero-plane {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-plane-grid {
    position: absolute;
    inset: -20% -10% 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(900px) rotateX(58deg) scale(1.35);
    transform-origin: center top;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, transparent 88%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 55%, transparent 88%);
    animation: aetherGridDrift 40s linear infinite;
}

@keyframes aetherGridDrift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 64px, 64px 0; }
}

.hero-plane-beam {
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(90vw, 920px);
    height: 42%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.18) 0%, transparent 68%);
    filter: blur(8px);
    animation: aetherBeamPulse 7s ease-in-out infinite;
}

@keyframes aetherBeamPulse {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.9; transform: translateX(-50%) scale(1.04); }
}

.hero-plane-horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 12, 0.55) 40%, var(--aether-ink) 100%);
}

.hero-editorial-grid {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.hero.hero-editorial .hero-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0;
    transform: none;
    text-align: start;
}

.hero-brand {
    margin: 0 0 20px;
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7.5vw, 5.4rem);
    letter-spacing: 0.16em;
    line-height: 1;
    color: #f4f7fa;
    text-indent: 0.16em;
    animation: aetherBrandIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[dir="ltr"] .hero-brand {
    letter-spacing: 0.2em;
}

@keyframes aetherBrandIn {
    from { opacity: 0; transform: translateY(18px); letter-spacing: 0.32em; }
    to { opacity: 1; transform: translateY(0); }
}

.hero.hero-editorial .hero-title {
    margin: 0 0 16px;
    font-family: "Outfit", "Cairo", sans-serif;
    font-weight: 800;
    font-size: clamp(1.45rem, 3.2vw, 2.35rem);
    line-height: 1.28;
    color: #e8eef4;
    text-shadow: none;
    background: none;
    -webkit-text-fill-color: unset;
    animation: aetherCopyIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero.hero-editorial .hero-subtitle {
    margin: 0 0 32px;
    max-width: 520px;
    font-size: clamp(0.98rem, 1.55vw, 1.1rem);
    line-height: 1.75;
    color: var(--aether-mist);
    animation: aetherCopyIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

@keyframes aetherCopyIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero.hero-editorial .hero-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    animation: aetherCopyIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.hero.hero-editorial .btn-primary {
    padding: 15px 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    color: #041010;
    font-weight: 800;
    font-size: 1.02rem;
    box-shadow: 0 12px 32px rgba(15, 118, 110, 0.35);
    border: none;
}

.hero.hero-editorial .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(45, 212, 191, 0.28);
}

.hero.hero-editorial .btn-secondary {
    padding: 15px 28px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 32, 0.55);
    color: #e8eef4;
    font-weight: 700;
    font-size: 1.02rem;
    box-shadow: none;
}

.hero.hero-editorial .btn-secondary:hover {
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.08);
    transform: translateY(-3px);
}

.hero.hero-editorial .hero-badge,
.hero.hero-editorial .hero-proof {
    display: none !important;
}

/* Atmospheric visual plane ? Mac windows via CSS background (no <img> affordances) */
.hero-visual {
    position: relative;
    min-height: min(58vh, 540px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aetherCopyIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

.hero-showcase {
    position: relative;
    width: min(100%, 500px);
    height: min(58vh, 540px);
    margin: 0 auto;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.hero-shot {
    position: absolute;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: #0b1016;
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.58),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-shot-chrome {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: linear-gradient(180deg, #2a323e 0%, #171d26 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-shot-chrome span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}

.hero-shot-chrome span:nth-child(1) { background: #ff5f57; }
.hero-shot-chrome span:nth-child(2) { background: #febc2e; }
.hero-shot-chrome span:nth-child(3) { background: #28c840; }

.hero-shot-viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background-color: #07090c;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.hero-shot-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}

.hero-shot-viewport--cairo {
    background-image: url("../img/portfolio/cairo-audience.jpg?v=aether-expert-v4b");
    background-position: 48% 8%;
}

.hero-shot-viewport--massa {
    background-image: url("../img/portfolio/masa-editorial.png?v=aether-expert-v4b");
    background-position: 50% 0%;
}

.hero-shot-viewport--heba {
    background-image: url("../img/portfolio/heba-live.png?v=aether-expert-v4b");
    background-position: 50% 0%;
}

.hero-shot-viewport--donuts {
    background-image: url("../img/portfolio/donuts-live.png?v=aether-expert-v4b");
    background-position: 50% 0%;
}

.hero-shot-viewport--saraya {
    background-image: url("../img/portfolio/saraya-logistics-shot.png?v=aether-expert-v4b");
    background-position: 62% 0%;
}

.hero-shot img,
.hero-showcase img {
    display: none !important;
}

.hero-shot-back {
    width: 56%;
    height: 58%;
    inset-inline-start: 2%;
    top: 8%;
    transform: rotate(-5.5deg) translateZ(0);
    z-index: 1;
    opacity: 0.92;
    filter: brightness(0.92) saturate(0.95);
}

.hero-shot-side {
    width: 46%;
    height: 46%;
    inset-inline-end: 1%;
    top: 5%;
    transform: rotate(6.5deg) translateZ(0);
    z-index: 2;
    opacity: 0.95;
    filter: brightness(0.95);
}

.hero-shot-main {
    width: 76%;
    height: 70%;
    inset-inline-start: 12%;
    bottom: 11%;
    z-index: 3;
    transform: rotate(-1deg) translateZ(0);
    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(45, 212, 191, 0.12);
}

.hero-shot-main:hover {
    transform: rotate(-1deg) translateY(-3px) translateZ(0);
    box-shadow:
        0 36px 78px rgba(0, 0, 0, 0.66),
        0 0 0 1px rgba(45, 212, 191, 0.2);
}

.hero-shot-label {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 12px 9px;
    font-family: "Space Grotesk", "Outfit", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(232, 238, 244, 0.82);
    background: rgba(7, 9, 12, 0.97);
    border-top: 1px solid rgba(45, 212, 191, 0.22);
}

.hero-client-chiprow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 460px;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.hero-client-chiprow li {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(10, 14, 19, 0.82);
    backdrop-filter: blur(8px);
    color: rgba(232, 238, 244, 0.78);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Remove obsolete wireframe styles if any remain referenced */
.hero-visual-frame,
.hero-visual-scan,
.hero-visual-nodes,
.hero-visual-mark {
    display: none !important;
}

/* ?? Dark client wall (overrides cream panel leftovers) ?? */
.client-wall-section.client-wall-dark {
    max-width: 1180px;
    margin: 72px auto 0;
    padding: 64px clamp(16px, 3vw, 40px) 56px;
    scroll-margin-top: 160px;
    color: #e8eef4;
    background:
        linear-gradient(165deg, rgba(18, 24, 32, 0.96) 0%, rgba(8, 11, 16, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4);
}

.client-wall-section.client-wall-dark::before {
    color: rgba(232, 238, 244, 0.03);
}

.client-wall-section.client-wall-dark .client-wall-head {
    margin-bottom: 28px;
}

.client-wall-section.client-wall-dark .client-wall-head h2 {
    color: #f4f7fa;
}

.client-wall-section.client-wall-dark .client-wall-head p {
    color: var(--aether-mist);
}

.client-wall-section.client-wall-dark .client-wall-check {
    color: #041010;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.28);
}

.client-featured-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto 32px;
}

.client-featured-row .client-logo-tile.featured-client {
    min-height: 108px;
    padding: 16px 10px;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.1), rgba(15, 23, 32, 0.55));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    color: #e8eef4;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.client-featured-row .client-logo-tile.featured-client:hover {
    transform: translateY(-4px);
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.14), rgba(15, 23, 32, 0.65));
}

.client-featured-row .client-logo-tile.featured-client i {
    color: var(--aether-teal);
    font-size: 1.35rem;
}

.client-featured-row .client-logo-tile.featured-client b {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}

.client-featured-row .client-logo-tile.featured-client small {
    color: rgba(232, 238, 244, 0.62);
    font-size: 0.74rem;
    font-weight: 600;
}

.client-sectors-label {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto 14px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 238, 244, 0.55);
}

.client-wall-section.client-wall-dark .client-logo-panels {
    max-width: 1060px;
}

.client-wall-section.client-wall-dark .client-logo-panel {
    background: rgba(8, 12, 18, 0.92) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 40px rgba(0, 0, 0, 0.35) !important;
    padding: 22px !important;
    gap: 12px !important;
}

.client-wall-section.client-wall-dark .client-logo-panel .client-logo-tile {
    min-height: 86px;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(232, 238, 244, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #e8eef4 !important;
}

.client-wall-section.client-wall-dark .client-logo-panel .client-logo-tile:hover {
    border-color: rgba(45, 212, 191, 0.4);
    background: rgba(45, 212, 191, 0.08);
    box-shadow: none;
    transform: translateY(-2px);
}

.client-wall-section.client-wall-dark .client-logo-panel .client-logo-tile i {
    color: #5eead4 !important;
    font-size: 1.15rem;
}

.client-wall-section.client-wall-dark .client-logo-panel .client-logo-tile b {
    color: #f1f5f9 !important;
    font-size: 0.92rem;
    font-weight: 800;
}

.client-wall-section.client-wall-dark .client-logo-panel .client-logo-tile small {
    color: rgba(226, 232, 240, 0.72) !important;
    font-size: 0.74rem;
    font-weight: 600;
}

.client-logo-panel-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.client-wall-section.client-wall-dark .client-wall-cta {
    margin-top: 28px;
    border-color: rgba(45, 212, 191, 0.35);
    background: rgba(45, 212, 191, 0.1);
    color: #e8eef4;
}

/* Soft nav active / focus ? no crude white box */
.nav-links a {
    border-radius: 999px;
    padding: 6px 12px;
    outline: none;
}

.nav-links a:focus-visible {
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.45);
}

.nav-links a.is-active {
    color: #ecfeff;
    background: rgba(45, 212, 191, 0.12);
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.28);
}

.nav-links a.is-active::after {
    width: 0 !important;
}

.nav-links .nav-btn.is-active {
    background: rgba(45, 212, 191, 0.16);
    border-color: rgba(45, 212, 191, 0.4);
    color: #ecfeff;
    box-shadow: none;
}

/* ?? Portfolio static showcase (no iframe / no dead live CTAs) ?? */
.interactive-portfolio {
    padding: clamp(64px, 8vw, 100px) clamp(14px, 3vw, 24px);
    max-width: 1400px;
    margin: 40px auto 0;
}

.interactive-portfolio .section-title {
    text-shadow: none !important;
}

.portfolio-lead {
    margin-top: 8px;
    margin-bottom: 28px;
    text-align: center;
    position: relative;
    z-index: 0;
    max-width: 36rem;
    overflow-wrap: anywhere;
    transform: none !important;
}

.custom-project-btn {
    margin-top: 16px;
    width: auto;
    align-self: flex-start;
}

.monitor-screen {
    position: relative;
    overflow: hidden;
    background: #0a0e13;
}

.monitor-screen iframe,
.fallback-preview,
.frame-overlay,
.portfolio-live-bar,
.open-live-btn {
    display: none !important;
}

.portfolio-shot {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #0a0e13;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transition: opacity 0.28s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    cursor: default;
}

.portfolio-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    text-align: center;
}

.portfolio-meta strong {
    font-family: var(--font-en, 'Outfit', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f3f4f6;
    letter-spacing: 0.02em;
}

.portfolio-meta span {
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.95);
}

.portfolio-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid rgba(45, 212, 191, 0.4);
    background: rgba(15, 118, 110, 0.35);
    color: #ecfeff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.portfolio-visit:hover {
    transform: translateY(-2px);
    background: rgba(15, 118, 110, 0.55);
    box-shadow: 0 10px 24px rgba(45, 212, 191, 0.2);
}

.portfolio-visit[hidden] {
    display: none !important;
}

a.client-logo-tile.featured-client {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

a.client-logo-tile.featured-client:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 212, 191, 0.45);
}

.monitor-3d[data-preview-state="shot"] {
    transform: rotateX(10deg) rotateY(-18deg) rotateZ(3deg);
}

/* Services: quieter micro tags on small screens */
@media (max-width: 768px) {
    .service-micro-list {
        display: none;
    }

    .services-grid-expanded {
        gap: 14px;
    }
}

/* ?? Responsive matrix: ~360 / 768 / 1024 / 1280+ ?? */
@media (max-width: 1024px) {
    .hero-editorial-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero.hero-editorial .hero-content {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .hero.hero-editorial .hero-subtitle {
        margin-inline: auto;
    }

    .hero.hero-editorial .hero-actions {
        justify-content: center;
    }

    .hero-visual {
        min-height: 300px;
    }

    .hero-showcase {
        width: min(100%, 440px);
        height: 300px;
    }

    .hero-shot-back,
    .hero-shot-side {
        display: none;
    }

    .hero-shot-main {
        width: 100%;
        height: calc(100% - 36px);
        inset-inline-start: 0;
        top: 0;
        bottom: auto;
        transform: none;
        border-radius: 14px;
    }

    .hero-shot-main:hover {
        transform: translateY(-2px);
    }

    .hero-shot-viewport--massa {
        background-position: 50% 0%;
    }

    .hero-client-chiprow {
        bottom: 0;
    }

    .hero-client-chiprow li:nth-child(n+4) {
        display: none;
    }

    .client-featured-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .client-logo-panel-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .hero.hero-editorial {
        padding: 100px 18px 48px;
        min-height: 100svh;
    }

    .hero-brand {
        font-size: clamp(2.15rem, 12vw, 3.1rem);
        letter-spacing: 0.12em;
        text-indent: 0.12em;
        margin-bottom: 16px;
    }

    .hero.hero-editorial .hero-title {
        font-size: 1.38rem;
    }

    .hero.hero-editorial .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero.hero-editorial .btn-primary,
    .hero.hero-editorial .btn-secondary {
        width: 100%;
        max-width: 360px;
        min-height: 52px;
    }

    .hero-plane-grid {
        background-size: 44px 44px;
        opacity: 0.85;
    }

    .hero-visual {
        min-height: 230px;
        margin-top: 12px;
    }

    .hero-showcase {
        width: 100%;
        max-width: 360px;
        height: 230px;
    }

    .hero-shot-back,
    .hero-shot-side {
        display: none;
    }

    .hero-shot-main {
        width: 100%;
        height: calc(100% - 32px);
        inset: 0 auto auto 0;
        transform: none;
    }

    .hero-shot-main:hover {
        transform: none;
    }

    .hero-shot-viewport--massa {
        background-position: 50% 0%;
    }

    .hero-client-chiprow li {
        font-size: 0.62rem;
        padding: 4px 8px;
    }

    .hero-client-chiprow li:nth-child(n+3) {
        display: none;
    }

    .client-featured-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .client-logo-panel-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .client-wall-section.client-wall-dark {
        margin-top: 48px;
        padding: 40px 14px;
        border-radius: 22px;
    }

    .interactive-portfolio {
        padding-top: 48px;
    }
}

@media (min-width: 1280px) {
    .hero-editorial-grid {
        gap: 72px;
    }

    .hero.hero-editorial {
        padding-inline: 64px;
    }

    .hero-showcase {
        width: 520px;
        height: 540px;
    }

    .client-featured-row {
        gap: 16px;
    }
}

@media (max-width: 380px) {
    .hero.hero-editorial .hero-title {
        font-size: 1.28rem;
    }

    .client-featured-row .client-logo-tile b {
        font-size: 0.82rem;
    }

    .hero-client-chiprow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb-teal,
    .orb-steel,
    .hero-plane-grid,
    .hero-plane-beam,
    .hero-brand,
    .hero.hero-editorial .hero-title,
    .hero.hero-editorial .hero-subtitle,
    .hero.hero-editorial .hero-actions,
    .hero-visual {
        animation: none !important;
    }
}

/* ?? perf-v1: lighter scroll/paint ?? */
html.no-cursor-fx, html.no-cursor-fx body { cursor: auto !important; }
html.no-cursor-fx .custom-cursor,
html.no-cursor-fx .custom-cursor-follower { display: none !important; }
.orb-purple, .orb-indigo {
    will-change: auto !important;
    animation: none !important;
    filter: blur(48px) !important;
    opacity: 0.35;
}
.hero-showcase, .hero-shot, .portfolio-shot {
    contain: layout paint;
    transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .monitor-3d, .hero-shot-back, .hero-shot-side, .hero-shot-main {
        transform: none !important;
        filter: none !important;
    }
}

/* ?? experience-v1: buttery scroll + prestige clients ?? */
html {
    scroll-behavior: smooth;
    overscroll-behavior-y: auto;
    -webkit-text-size-adjust: 100%;
}

body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10050;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    transition: none;
    pointer-events: none;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf, #94a3b8);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.35);
}

@media (max-width: 900px) {
    .perspective-scene {
        perspective: none;
    }
    .site-wrapper,
    .hero,
    .tilt-card,
    .funnel-section {
        transform-style: flat;
    }
    .dynamic-bg .bg-orb {
        animation: none !important;
        filter: blur(40px);
        opacity: 0.28;
    }
    .planner-sidebar,
    .planner-main {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.client-wall-eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    background: rgba(45, 212, 191, 0.08);
    color: #5eead4;
    font-family: "Space Grotesk", "Outfit", "Cairo", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.client-supporting-label {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto 14px;
    color: rgba(232, 238, 244, 0.62);
    font-size: 0.92rem;
    font-weight: 600;
}

.client-prestige-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: 0 auto 28px;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(45, 212, 191, 0.32);
    background:
        linear-gradient(135deg, rgba(15, 23, 32, 0.92), rgba(8, 12, 18, 0.98));
    text-decoration: none;
    color: inherit;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.client-prestige-card:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 212, 191, 0.55);
    box-shadow:
        0 30px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(45, 212, 191, 0.12);
}

.client-prestige-visual {
    min-height: 220px;
    background-image: url("../img/portfolio/cairo-audience.jpg?v=aether-expert-v4b");
    background-size: cover;
    background-position: 48% 12%;
    position: relative;
}

.client-prestige-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 40%, rgba(8, 12, 18, 0.88) 100%);
}

html[dir="rtl"] .client-prestige-visual::after {
    background: linear-gradient(270deg, transparent 40%, rgba(8, 12, 18, 0.88) 100%);
}

.client-prestige-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: clamp(18px, 3vw, 28px);
}

.client-prestige-badge {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(199, 125, 255, 0.14);
    border: 1px solid rgba(199, 125, 255, 0.28);
    color: #e9d5ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.client-prestige-copy strong {
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    line-height: 1.25;
    font-weight: 900;
    color: #f8fafc;
}

.client-prestige-sub {
    color: rgba(226, 232, 240, 0.72);
    line-height: 1.7;
    font-size: 0.95rem;
}

.client-prestige-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: #5eead4;
    font-weight: 800;
    font-size: 0.9rem;
}

.client-prestige-cta i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.client-prestige-card:hover .client-prestige-cta i {
    transform: translate(2px, -2px);
}

html[dir="rtl"] .client-prestige-card:hover .client-prestige-cta i {
    transform: translate(-2px, -2px);
}

.hero-client-chiprow li {
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.hero-client-chiprow li:first-child {
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(45, 212, 191, 0.14);
    color: #99f6e4;
}

@media (hover: hover) and (pointer: fine) {
    .hero-client-chiprow li:hover {
        transform: translateY(-2px);
        border-color: rgba(45, 212, 191, 0.5);
        background: rgba(45, 212, 191, 0.12);
    }
}

.client-wall-section.client-wall-dark .client-wall-head {
    margin-bottom: 22px;
}

@media (max-width: 768px) {
    .client-prestige-card {
        grid-template-columns: 1fr;
        margin-bottom: 22px;
    }
    .client-prestige-visual {
        min-height: 160px;
    }
    .client-prestige-visual::after {
        background: linear-gradient(180deg, transparent 30%, rgba(8, 12, 18, 0.92) 100%);
    }
    .client-featured-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .client-featured-row .client-logo-tile.featured-client {
        min-height: 92px;
        padding: 12px 8px;
    }
    body {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }
}

/* ?? scroll-silk-v1: zero heaviness while scrolling ?? */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    html {
        scroll-behavior: auto;
    }

    .nav-container,
    .sticky-conversion-dock,
    .planner-sidebar,
    .planner-main,
    .glass-terminal,
    .tilt-card-inner,
    .service-card .tilt-card-inner,
    .pricing-card-inner,
    .bento-item,
    .wizard-card,
    .frame-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav-container {
        background: rgba(10, 8, 18, 0.96) !important;
    }

    .sticky-conversion-dock {
        background: rgba(8, 8, 14, 0.97) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    }

    .planner-sidebar,
    .planner-main,
    .glass-terminal,
    .tilt-card-inner,
    .pricing-card-inner {
        background: rgba(10, 12, 20, 0.94) !important;
    }

    .perspective-scene,
    .tilt-card,
    .showroom-monitor-wrapper,
    .steps-container {
        perspective: none !important;
    }

    .site-wrapper,
    .hero,
    .tilt-card,
    .funnel-section,
    .monitor-3d,
    .process-timeline {
        transform-style: flat !important;
    }

    .tilt-card-inner {
        transform: none !important;
        transition: none !important;
    }

    .dynamic-bg .bg-orb,
    .orb-purple,
    .orb-indigo {
        animation: none !important;
        filter: blur(28px) !important;
        opacity: 0.22 !important;
        will-change: auto !important;
    }

    .scroll-progress-bar {
        display: none !important;
    }

    .site-logo {
        animation: none !important;
        filter: none !important;
    }

    .reveal {
        transform: translateY(8px);
        transition: opacity 0.28s ease, transform 0.28s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ?? legacy premium elevation block (overridden by Noir Atelier below) ?? */
.hero-prestige-line {
    margin: 22px 0 0;
    max-width: 420px;
    font-family: "Space Grotesk", "Outfit", "Cairo", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.88);
    animation: aetherCopyIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

.hero.hero-editorial .hero-brand {
    font-size: clamp(3.1rem, 8vw, 5.8rem);
    letter-spacing: 0.14em;
    background: linear-gradient(180deg, #ffffff 10%, #c5d0db 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero.hero-editorial .hero-title {
    font-size: clamp(1.35rem, 2.9vw, 2.15rem);
    font-weight: 700;
    color: rgba(232, 238, 244, 0.94);
    max-width: 18ch;
}

.hero.hero-editorial .hero-subtitle {
    color: rgba(186, 198, 212, 0.9);
    max-width: 34rem;
}

.hero-client-chiprow {
    display: none !important;
}

.client-wall-section.client-wall-dark {
    margin-top: clamp(56px, 8vw, 96px);
    padding: clamp(48px, 6vw, 72px) clamp(16px, 3vw, 44px) clamp(44px, 5vw, 64px);
}

.client-prestige-card + .client-prestige-card {
    margin-top: -8px;
}

.client-prestige-card--ghanem {
    border-color: rgba(217, 119, 6, 0.38);
    background:
        linear-gradient(135deg, rgba(28, 20, 12, 0.94), rgba(10, 12, 16, 0.98));
}

.client-prestige-card--ghanem:hover {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow:
        0 30px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(245, 158, 11, 0.12);
}

.client-prestige-visual--ghanem {
    background-image: url("../img/portfolio/ghanim-realestate-shot.png?v=aether-expert-v4b");
    background-position: center 30%;
}

.client-prestige-card--ghanem .client-prestige-badge {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.client-prestige-card--ghanem .client-prestige-cta {
    color: #fcd34d;
}

.services,
.interactive-portfolio,
.geo-entity {
    scroll-margin-top: 140px;
}

.section-title {
    letter-spacing: -0.02em;
}

.geo-entity {
    padding-block: clamp(48px, 7vw, 80px);
}

.nav-container {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav-links a {
    font-size: 0.92rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .hero-prestige-line {
        margin-top: 18px;
        font-size: 0.78rem;
    }

    .client-prestige-card,
    .client-prestige-card--ghanem {
        grid-template-columns: 1fr;
    }

    .client-prestige-visual,
    .client-prestige-visual--ghanem {
        min-height: 160px;
    }

    .hero.hero-editorial .hero-title {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-prestige-line {
        animation: none !important;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   AETHER visual-v2 ? Noir Atelier (editorial dark + restrained gold prestige)
   Preserve: smart pricing, currency menus [hidden], scroll-silk, SEO surfaces
   ??????????????????????????????????????????????????????????????????????????? */
:root {
    --ink: #060708;
    --ink-elevated: #0c0e12;
    --paper: #e8e4dc;
    --paper-mute: #9a958c;
    --line: rgba(232, 228, 220, 0.12);
    --gold: #c4a574;
    --gold-soft: rgba(196, 165, 116, 0.18);
    --violet-cta: #6b4eff;
    --violet-cta-deep: #4f35c8;
    --surface: rgba(14, 16, 20, 0.94);
    --whatsapp: #1f9d55;
    --bg-dark: var(--ink);
    --text-primary: var(--paper);
    --text-secondary: var(--paper-mute);
    --font-primary: "Sora", "Cairo", sans-serif;
    --neon-purple: var(--violet-cta);
    --glass-bg: rgba(12, 14, 18, 0.88);
    --glass-border: var(--line);
    --aether-ink: var(--ink);
    --aether-steel: var(--paper-mute);
    --aether-teal: var(--gold);
    --aether-teal-deep: #8a7349;
    --aether-mist: rgba(232, 228, 220, 0.78);
}

body {
    background-color: var(--ink);
    color: var(--paper);
    font-family: var(--font-primary);
}

.dynamic-bg {
    background:
        radial-gradient(ellipse 70% 50% at 18% -8%, rgba(196, 165, 116, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 92% 12%, rgba(107, 78, 255, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #08090b 0%, var(--ink) 48%, #040506 100%);
}

.orb-purple,
.orb-indigo,
.orb-teal,
.orb-steel {
    display: none !important;
}

.orb-ink {
    width: 58vw;
    height: 58vw;
    max-width: 760px;
    max-height: 760px;
    background: #1a1c22;
    top: -22%;
    inset-inline-start: -18%;
    opacity: 0.55;
    filter: blur(120px);
    animation: aetherOrbDrift 36s ease-in-out infinite alternate;
}

.orb-gold {
    width: 42vw;
    height: 42vw;
    max-width: 520px;
    max-height: 520px;
    background: #6b5a3a;
    bottom: -18%;
    inset-inline-end: -12%;
    opacity: 0.22;
    filter: blur(130px);
    animation: aetherOrbDrift 42s ease-in-out infinite alternate-reverse;
}

.perspective-bg-grid {
    opacity: 0.18;
}

/* ?? Nav: quieter atelier bar ?? */
.nav-container {
    top: 14px;
    border-radius: 18px;
    padding: 12px 22px;
    background: rgba(8, 9, 11, 0.92);
    border: 1px solid var(--line);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-logo {
    height: 48px;
    filter: none;
    animation: none;
}

.site-logo:hover {
    transform: none;
    filter: none;
}

.brand-word {
    font-family: "Syne", "Sora", sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--paper);
    text-shadow: none;
}

.nav-links a {
    color: var(--paper-mute);
    font-family: "Sora", "Cairo", sans-serif;
    font-weight: 500;
    font-size: 0.88rem;
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--paper);
}

.nav-links .nav-btn {
    background: var(--violet-cta) !important;
    color: #f7f5ff !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
}

.nav-links .nav-btn:hover,
.nav-links .nav-btn.is-active {
    background: var(--violet-cta-deep) !important;
    transform: none !important;
    box-shadow: none !important;
}

.icon-btn {
    border-radius: 10px;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.03);
}

.icon-btn:hover {
    background: rgba(196, 165, 116, 0.12);
    box-shadow: none;
    transform: none;
    color: var(--gold);
}

/* ?? Hero Noir ?? */
.hero.hero-editorial.hero-noir,
.hero.hero-noir {
    padding: 120px clamp(18px, 4vw, 56px) 72px;
}

.hero-plane-grid,
.hero-plane-beam {
    display: none !important;
}

.hero-plane-grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background:
        radial-gradient(ellipse 90% 60% at 70% 40%, rgba(196, 165, 116, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(107, 78, 255, 0.04) 0%, transparent 55%);
    pointer-events: none;
}

.hero-plane-horizon {
    height: 42%;
    background: linear-gradient(180deg, transparent 0%, rgba(6, 7, 8, 0.65) 45%, var(--ink) 100%);
}

.hero-brand {
    font-family: "Syne", "Sora", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.2rem, 8.5vw, 6.2rem) !important;
    letter-spacing: 0.12em !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--paper) !important;
    color: var(--paper) !important;
    text-indent: 0 !important;
}

html[dir="ltr"] .hero-brand {
    letter-spacing: 0.16em !important;
}

.hero.hero-editorial .hero-title,
.hero.hero-noir .hero-title {
    font-family: "Cairo", "Sora", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem) !important;
    max-width: 20ch !important;
    color: var(--paper) !important;
    line-height: 1.35 !important;
}

.hero.hero-editorial .hero-subtitle,
.hero.hero-noir .hero-subtitle {
    color: var(--paper-mute) !important;
    max-width: 32rem !important;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important;
}

.hero.hero-editorial .btn-primary,
.hero.hero-noir .btn-primary,
.btn-primary {
    background: linear-gradient(165deg, var(--violet-cta) 0%, var(--violet-cta-deep) 100%) !important;
    color: #f7f5ff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(79, 53, 200, 0.28) !important;
    border: none !important;
    font-family: "Sora", "Cairo", sans-serif;
    font-weight: 700;
}

.hero.hero-editorial .btn-primary:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(79, 53, 200, 0.34) !important;
}

.hero.hero-editorial .btn-secondary,
.hero.hero-noir .btn-secondary,
.btn-secondary {
    border: 1px solid var(--line) !important;
    background: transparent !important;
    color: var(--paper) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.hero.hero-editorial .btn-secondary:hover,
.btn-secondary:hover {
    border-color: rgba(196, 165, 116, 0.45) !important;
    background: rgba(196, 165, 116, 0.06) !important;
    transform: translateY(-2px);
}

.hero-prestige-line {
    font-family: "Sora", "Cairo", sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--gold) !important;
    border-inline-start: 2px solid var(--gold);
    padding-inline-start: 12px;
    margin-top: 28px !important;
}

/* Cinematic crop ? replaces macOS stack */
.hero-showcase,
.hero-shot,
.hero-shot-chrome,
.hero-shot-label,
.hero-client-chiprow {
    display: none !important;
}

.hero-visual {
    min-height: min(62vh, 560px);
    align-items: stretch;
    justify-content: stretch;
}

.hero-cinema {
    width: 100%;
    height: 100%;
    min-height: min(62vh, 560px);
    display: flex;
    align-items: center;
}

.hero-cinema-frame {
    position: relative;
    width: 100%;
    height: min(62vh, 560px);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(196, 165, 116, 0.28);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    background: #050607;
}

.hero-cinema-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(196, 165, 116, 0.12);
}

.hero-cinema-crop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #07090c;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48% 8%;
    animation: noirKen 28s ease-in-out infinite alternate;
}

@keyframes noirKen {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.06) translate(-1.5%, 1%); }
}

.hero-cinema-caption {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 18px;
    font-family: "Syne", "Sora", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.85);
    background: linear-gradient(180deg, transparent 0%, rgba(6, 7, 8, 0.92) 40%);
    border-top: 1px solid rgba(196, 165, 116, 0.22);
}

/* ?? Sections rhythm ?? */
.section-title {
    font-family: "Cairo", "Syne", sans-serif;
    color: var(--paper);
    letter-spacing: -0.02em;
}

.section-lead {
    color: var(--paper-mute);
}

.geo-entity {
    max-width: 920px;
    margin-inline: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
}

.geo-facts {
    gap: 18px;
}

.geo-facts dt {
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.geo-facts dd {
    color: var(--paper);
}

/* ?? Clients: asymmetric prestige duo ?? */
.client-wall-section.client-wall-dark {
    max-width: 1180px;
    margin: clamp(64px, 9vw, 110px) auto 0;
    padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 40px);
    border-radius: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(12, 14, 18, 0.98) 0%, rgba(6, 7, 8, 0.99) 100%);
    box-shadow: none;
}

.client-wall-eyebrow {
    color: var(--gold) !important;
    font-family: "Sora", "Cairo", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
}

.client-prestige-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 18px;
    margin: 28px 0 36px;
}

.client-prestige-card,
.client-prestige-card--flagship,
.client-prestige-card--ghanem {
    margin: 0 !important;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--ink-elevated);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.client-prestige-card--flagship {
    border-color: rgba(196, 165, 116, 0.42);
    box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.08);
}

.client-prestige-card--ghanem {
    border-color: rgba(196, 165, 116, 0.22);
    background: linear-gradient(160deg, rgba(22, 18, 12, 0.95), rgba(10, 11, 14, 0.98));
}

.client-prestige-card:hover {
    border-color: rgba(196, 165, 116, 0.55);
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.client-prestige-visual,
.client-prestige-visual--ghanem {
    min-height: 220px;
    border-radius: 0;
}

.client-prestige-card--flagship .client-prestige-visual {
    min-height: 280px;
}

.client-prestige-visual::after {
    background: linear-gradient(180deg, transparent 30%, rgba(6, 7, 8, 0.75) 100%);
}

.client-prestige-copy {
    padding: 20px 22px 24px;
    gap: 10px;
}

.client-prestige-badge {
    border-radius: 4px;
    border-color: rgba(196, 165, 116, 0.35);
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.client-prestige-card--ghanem .client-prestige-badge {
    border-color: rgba(196, 165, 116, 0.28);
    background: rgba(196, 165, 116, 0.1);
    color: #d4b896;
}

.client-prestige-copy strong {
    font-family: "Cairo", "Syne", sans-serif;
    font-size: 1.15rem;
    color: var(--paper);
}

.client-prestige-sub {
    color: var(--paper-mute);
}

.client-prestige-cta,
.client-prestige-card--ghanem .client-prestige-cta {
    color: var(--gold);
}

.client-supporting-label,
.client-sectors-label {
    color: var(--paper-mute);
    font-size: 0.85rem;
}

.client-featured-row .client-logo-tile.featured-client,
.client-logo-tile {
    border-radius: 6px;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

.client-wall-cta--quiet {
    display: inline-flex;
    margin-top: 28px;
    padding: 0;
    border: none;
    background: none;
    color: var(--gold);
    font-family: "Sora", "Cairo", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: none;
}

.client-wall-cta--quiet:hover {
    color: var(--paper);
}

.client-wall-cta.action-btn {
    display: none;
}

/* ?? Portfolio film frame ?? */
.mac-dots {
    display: none !important;
}

.film-frame-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    padding: 0 14px;
    background: #0a0b0e !important;
    border-bottom: 1px solid rgba(196, 165, 116, 0.22) !important;
}

.film-frame-mark {
    width: 18px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    flex-shrink: 0;
}

.browser-url {
    font-family: "Sora", monospace;
    font-size: 0.75rem;
    color: var(--paper-mute);
}

.monitor-3d,
.showroom-monitor-wrapper .monitor-3d {
    border-radius: 6px;
    border: 1px solid var(--line);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.monitor-glow,
.monitor-base {
    opacity: 0.35;
    filter: none;
}

.project-btn {
    border-radius: 6px;
    border-color: var(--line);
}

.project-btn.active {
    border-color: rgba(196, 165, 116, 0.45);
    background: rgba(196, 165, 116, 0.08);
}

/* ?? Pricing / planner: quieter chrome, keep chips ?? */
.pricing-card-inner,
.planner-shell,
.glass-terminal,
.wizard-card {
    border-color: var(--line);
}

.action-btn.plan-cta.premium,
.action-btn.premium {
    background: linear-gradient(165deg, var(--violet-cta), var(--violet-cta-deep));
    box-shadow: 0 10px 28px rgba(79, 53, 200, 0.25);
}

.currency-chip.is-active {
    border-color: rgba(196, 165, 116, 0.5);
    box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.15);
}

.currency-menu[hidden],
.currency-more-panel[hidden] {
    display: none !important;
}

/* ?? Sticky dock: two actions only ?? */
.sticky-conversion-dock {
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(8, 9, 11, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    padding: 8px;
    gap: 8px;
}

.dock-action.primary {
    background: var(--violet-cta);
    color: #f7f5ff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
}

.dock-action.whatsapp {
    background: transparent;
    border: 1px solid rgba(31, 157, 85, 0.45);
    color: #7ddea8;
    border-radius: 10px;
}

.dock-action.icon-only {
    display: none !important;
}

/* ?? Final CTA / footer ?? */
.final-cta-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(14, 16, 20, 0.98), rgba(6, 7, 8, 0.99));
    box-shadow: none;
}

.grand-footer {
    border-top: 1px solid var(--line);
}

/* ?? Services cards: less neon ?? */
.service-card .tilt-card-inner,
.bento-item,
.pricing-card-inner {
    border-radius: 8px;
    border-color: var(--line);
    box-shadow: none;
}

/* ?? scroll-silk: keep mobile sticky without blur ?? */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .nav-container,
    .sticky-conversion-dock {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .nav-container {
        background: rgba(6, 7, 8, 0.97) !important;
    }

    .sticky-conversion-dock {
        background: rgba(6, 7, 8, 0.98) !important;
    }

    .hero-cinema-crop {
        animation: none !important;
    }
}

@media (max-width: 900px) {
    .hero-editorial-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .hero-cinema,
    .hero-cinema-frame,
    .hero-visual {
        min-height: 42vh;
        height: 42vh;
    }

    .client-prestige-duo {
        grid-template-columns: 1fr;
    }

    .client-prestige-card--flagship .client-prestige-visual,
    .client-prestige-visual,
    .client-prestige-visual--ghanem {
        min-height: 180px;
    }

    .hero.hero-editorial .hero-title,
    .hero.hero-noir .hero-title {
        max-width: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cinema-crop,
    .orb-ink,
    .orb-gold,
    .hero-brand,
    .hero.hero-editorial .hero-title,
    .hero.hero-editorial .hero-subtitle,
    .hero.hero-editorial .hero-actions,
    .hero-prestige-line {
        animation: none !important;
    }
}


/* ============================================================
   AETHER FLAGSHIP V3 ? Cinema Flagship (equal 390 / 768 / 1440)
   Release: aether-expert-v4b
   ============================================================ */

:root {
    --ink: #050607;
    --ink-elev: #0b0d10;
    --paper: #ebe6dc;
    --paper-mute: #9c968c;
    --line: rgba(235, 230, 220, 0.14);
    --gold: #c6a56a;
    --gold-soft: rgba(198, 165, 106, 0.16);
    --cta-fill: #ebe6dc;
    --cta-ink: #0a0b0d;
    --whatsapp: #1f9d55;
    --veil: rgba(5, 6, 7, 0.72);
    --dock-h: 64px;
}

/* Kill leftover purple mobile body from pre-v2 */
@media (max-width: 768px) {
    body {
        background: var(--ink) !important;
    }
    .dynamic-bg {
        background:
            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(198, 165, 106, 0.08) 0%, transparent 55%),
            linear-gradient(180deg, #08090b 0%, var(--ink) 50%, #030405 100%) !important;
    }
}

.dynamic-bg {
    background:
        radial-gradient(ellipse 70% 45% at 20% -5%, rgba(198, 165, 106, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(235, 230, 220, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, #08090b 0%, var(--ink) 48%, #030405 100%) !important;
}

/* ---------- NAV FLAGSHIP ---------- */
.nav-container.nav-flagship {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    top: max(12px, env(safe-area-inset-top, 0px));
    width: min(1120px, calc(100% - 28px));
    max-width: none;
    min-height: 56px;
    padding: 10px 16px;
    border-radius: 16px;
    background: rgba(5, 6, 7, 0.94) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    direction: inherit;
    grid-template-columns: unset !important;
    transform: translateX(-50%);
    left: 50%;
    right: auto;
    z-index: 1000;
}

.nav-flagship .logo-container {
    display: flex !important;
    align-items: center;
    gap: 10px;
    order: 0 !important;
    grid-column: unset !important;
    justify-content: flex-start !important;
    flex-shrink: 0;
}

.nav-flagship .brand-word {
    display: inline-block !important;
    font-family: "Syne", "Sora", sans-serif !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--paper);
}

.nav-flagship .site-logo {
    height: 36px !important;
    max-width: 36px !important;
}

.nav-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--paper);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    z-index: 1002;
}

.nav-menu-toggle-bars,
.nav-menu-toggle-bars::before,
.nav-menu-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--paper);
    border-radius: 1px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-menu-toggle-bars::before,
.nav-menu-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-menu-toggle-bars::before { top: -6px; }
.nav-menu-toggle-bars::after { top: 6px; }

body.nav-open .nav-menu-toggle-bars { background: transparent; }
body.nav-open .nav-menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.nav-flagship .nav-controls {
    display: flex !important;
    order: 0 !important;
    grid-column: unset !important;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.nav-flagship .nav-drawer {
    display: contents;
}

.nav-flagship .nav-links {
    display: flex !important;
    align-items: center;
    gap: clamp(6px, 1.2vw, 18px);
    flex-wrap: nowrap;
    justify-content: center;
    width: auto !important;
    min-width: 0;
    grid-column: unset !important;
    order: 0 !important;
}

.nav-flagship .nav-links a {
    display: inline-flex !important;
    color: var(--paper-mute) !important;
    font-size: 0.86rem !important;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 4px;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.nav-flagship .nav-links a:hover,
.nav-flagship .nav-links a.is-active {
    color: var(--paper) !important;
}

.nav-flagship .nav-links .nav-btn {
    background: var(--cta-fill) !important;
    color: var(--cta-ink) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 700 !important;
    min-width: unset !important;
    box-shadow: none !important;
}

.nav-flagship .nav-links .nav-btn:hover {
    background: #f5f1e8 !important;
    transform: none !important;
}

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.55);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nav-scrim[hidden] { display: none !important; }

/* ---------- HERO FLAGSHIP ---------- */
.hero.hero-flagship {
    position: relative;
    isolation: isolate;
    min-height: min(100dvh, 920px);
    display: flex;
    align-items: stretch;
    padding: 0 !important;
    overflow: hidden;
}

.hero-flagship .hero-plane { display: none !important; }

.hero-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-stage-media {
    position: absolute;
    inset: 0;
    background-color: #07090c;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48% 12%;
}

.hero-stage-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 6, 7, 0.55) 0%, rgba(5, 6, 7, 0.35) 35%, rgba(5, 6, 7, 0.88) 100%),
        linear-gradient(90deg, rgba(5, 6, 7, 0.82) 0%, rgba(5, 6, 7, 0.25) 55%, rgba(5, 6, 7, 0.55) 100%);
}

.hero-stage-grain {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background:
        radial-gradient(ellipse 70% 50% at 70% 40%, rgba(198, 165, 106, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hero-flagship-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(96px, 12vh, 140px) clamp(18px, 4vw, 48px) clamp(88px, 10vh, 120px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
}

.hero-flagship .hero-content {
    width: 100%;
    max-width: 34rem;
    padding-top: 0 !important;
    margin: 0;
}

.hero-flagship .hero-brand {
    font-family: "Syne", "Sora", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.6rem, 7vw, 5.8rem) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    margin: 0 0 18px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--paper) !important;
    color: var(--paper) !important;
    text-indent: 0 !important;
    overflow: visible !important;
    max-width: 100%;
    word-break: keep-all;
}

html[dir="ltr"] .hero-flagship .hero-brand {
    letter-spacing: 0.12em !important;
}

.hero-flagship .hero-title {
    font-family: "Cairo", "Sora", sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.35rem, 2.4vw, 2.05rem) !important;
    line-height: 1.35 !important;
    max-width: 22ch !important;
    color: var(--paper) !important;
    margin: 0 0 14px !important;
    text-wrap: balance;
}

.hero-flagship .hero-subtitle {
    color: var(--paper-mute) !important;
    font-size: clamp(0.95rem, 1.35vw, 1.08rem) !important;
    line-height: 1.7 !important;
    max-width: 34rem !important;
    margin: 0 0 22px !important;
}

.hero-flagship .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.hero-flagship .btn-primary,
.hero.hero-flagship .btn-primary {
    background: var(--cta-fill) !important;
    color: var(--cta-ink) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 700 !important;
    min-height: 52px;
    padding: 12px 22px !important;
    width: auto !important;
    max-width: none !important;
}

.hero-flagship .btn-primary:hover {
    background: #f5f1e8 !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.hero-flagship .btn-secondary,
.hero.hero-flagship .btn-secondary {
    background: transparent !important;
    color: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    min-height: 52px;
    padding: 12px 20px !important;
    width: auto !important;
}

.hero-flagship .btn-secondary:hover {
    border-color: rgba(198, 165, 106, 0.45) !important;
    background: rgba(198, 165, 106, 0.06) !important;
}

.hero-flagship .hero-prestige-line {
    margin-top: 22px !important;
    font-size: 0.78rem !important;
    color: var(--gold) !important;
    border-inline-start: 2px solid var(--gold);
    padding-inline-start: 12px;
    letter-spacing: 0.02em !important;
}

.hero-flagship .hero-visual-desktop {
    min-height: min(58vh, 520px);
}

.hero-flagship .hero-cinema-frame {
    border-radius: 4px;
    border: 1px solid rgba(198, 165, 106, 0.3);
    height: min(58vh, 520px);
    min-height: min(58vh, 520px);
}

.hero-flagship .hero-cinema,
.hero-flagship .hero-visual-desktop {
    height: 100%;
    min-height: min(58vh, 520px);
}

/* On phone: stage IS the hero image; hide duplicate framed crop */
@media (max-width: 767px) {
    .hero-flagship .hero-visual-desktop {
        display: none !important;
    }

    .hero-flagship-grid {
        grid-template-columns: 1fr;
        align-items: end;
        min-height: min(100dvh, 900px);
        padding:
            calc(88px + env(safe-area-inset-top, 0px))
            18px
            calc(96px + env(safe-area-inset-bottom, 0px));
    }

    .hero-stage-veil {
        background:
            linear-gradient(180deg, rgba(5, 6, 7, 0.5) 0%, rgba(5, 6, 7, 0.2) 28%, rgba(5, 6, 7, 0.92) 72%);
    }

    .hero-flagship .hero-brand {
        font-size: clamp(2.4rem, 14vw, 3.4rem) !important;
        letter-spacing: 0.06em !important;
    }

    .hero-flagship .hero-title {
        font-size: 1.35rem !important;
        max-width: none !important;
    }

    .hero-flagship .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-flagship .btn-primary,
    .hero-flagship .btn-secondary {
        width: 100% !important;
        justify-content: center;
        text-align: center;
    }

    .nav-menu-toggle {
        display: inline-flex;
        margin-inline-start: auto;
    }

    .nav-flagship .nav-controls {
        margin-inline-start: 0;
    }

    .nav-flagship .nav-drawer {
        display: block;
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        width: min(320px, 88vw);
        height: 100dvh;
        z-index: 1001;
        padding:
            calc(88px + env(safe-area-inset-top, 0px))
            22px
            calc(28px + env(safe-area-inset-bottom, 0px));
        background: rgba(8, 9, 11, 0.98);
        border-inline-start: 1px solid var(--line);
        transform: translateX(105%);
        transition: transform 0.28s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    html[dir="rtl"] .nav-flagship .nav-drawer {
        transform: translateX(-105%);
    }

    body.nav-open .nav-flagship .nav-drawer {
        transform: translateX(0) !important;
    }

    .nav-flagship .nav-links {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }

    .nav-flagship .nav-links a {
        display: flex !important;
        padding: 14px 12px !important;
        font-size: 1.05rem !important;
        border-radius: 10px !important;
    }

    .nav-flagship .nav-links .nav-btn {
        margin-top: 12px;
        justify-content: center;
        padding: 14px 16px !important;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* Tablet: intentional editorial split */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav-menu-toggle {
        display: inline-flex;
        margin-inline-start: auto;
    }

    .nav-flagship .nav-controls {
        margin-inline-start: 0;
    }

    .nav-flagship .nav-drawer {
        display: block;
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        width: min(360px, 70vw);
        height: 100dvh;
        z-index: 1001;
        padding: calc(96px + env(safe-area-inset-top, 0px)) 28px 32px;
        background: rgba(8, 9, 11, 0.98);
        border-inline-start: 1px solid var(--line);
        transform: translateX(105%);
        transition: transform 0.28s ease;
        overflow-y: auto;
    }

    html[dir="rtl"] .nav-flagship .nav-drawer {
        transform: translateX(-105%);
    }

    body.nav-open .nav-flagship .nav-drawer {
        transform: translateX(0) !important;
    }

    .nav-flagship .nav-links {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .nav-flagship .nav-links a {
        display: flex !important;
        padding: 14px 12px !important;
        font-size: 1.05rem !important;
    }

    .nav-flagship .nav-links .nav-btn {
        margin-top: 14px;
        justify-content: center;
    }

    body.nav-open { overflow: hidden; }

    .hero-flagship .hero-stage {
        /* keep subtle atmosphere; framed crop carries main image */
        opacity: 0.35;
    }

    .hero-flagship-grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: center;
        min-height: min(100dvh, 1024px);
        padding: 120px 28px 100px;
        gap: 28px;
    }

    .hero-flagship .hero-visual-desktop {
        display: block !important;
        min-height: min(52vh, 480px);
    }

    .hero-flagship .hero-cinema-frame,
    .hero-flagship .hero-cinema,
    .hero-flagship .hero-visual-desktop {
        height: min(52vh, 480px);
        min-height: min(52vh, 480px);
    }

    .hero-flagship .hero-brand {
        font-size: clamp(3rem, 8vw, 4.2rem) !important;
        letter-spacing: 0.07em !important;
    }
}

/* Desktop cinema spread */
@media (min-width: 1024px) {
    .nav-menu-toggle { display: none !important; }
    .nav-scrim { display: none !important; }
    body.nav-open { overflow: auto; }

    .nav-flagship .nav-drawer {
        display: contents;
    }

    .hero-flagship .hero-stage {
        opacity: 0.42;
    }

    .hero-flagship-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
        min-height: min(100dvh, 900px);
        padding: 130px 48px 110px;
    }

    .hero-flagship .hero-visual-desktop {
        display: block !important;
    }

    .hero-flagship .hero-cinema-crop {
        animation: noirKen 28s ease-in-out infinite alternate;
    }
}

/* ---------- CLIENTS CINEMA ---------- */
.client-cinema-section {
    max-width: 1180px;
    margin: clamp(56px, 8vw, 100px) auto 0 !important;
    padding: clamp(28px, 4vw, 48px) clamp(14px, 3vw, 36px) !important;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(165deg, rgba(11, 13, 16, 0.98), rgba(5, 6, 7, 0.99));
}

.client-cinema-section .client-prestige-duo,
.client-cinema-section .client-featured-row--legacy {
    display: none !important;
}

.client-cinema-lead {
    position: relative;
    display: block;
    margin: 24px 0 14px;
    min-height: clamp(280px, 48vw, 420px);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(198, 165, 106, 0.38);
    text-decoration: none;
    color: inherit;
}

.client-cinema-lead-media {
    position: absolute;
    inset: 0;
    background-image: url("../img/portfolio/cairo-audience.jpg?v=aether-expert-v4b");
    background-size: cover;
    background-position: 48% 10%;
    background-repeat: no-repeat;
}

.client-cinema-lead-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(5, 6, 7, 0.88) 100%);
}

.client-cinema-lead-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px 24px;
}

.client-cinema-lead-copy strong {
    font-family: "Cairo", "Syne", sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.55rem);
    color: var(--paper);
}

.client-cinema-companion {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    margin: 0 0 28px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(198, 165, 106, 0.22);
    background: linear-gradient(160deg, rgba(22, 18, 12, 0.95), rgba(10, 11, 14, 0.98));
    text-decoration: none;
    color: inherit;
    min-height: 96px;
}

.client-cinema-companion-media {
    background-image: url("../img/portfolio/ghanim-realestate-shot.png?v=aether-expert-v4b");
    background-size: cover;
    background-position: center;
    min-height: 96px;
}

.client-cinema-companion-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
}

.client-cinema-companion-copy strong {
    font-family: "Cairo", sans-serif;
    font-size: 1.02rem;
    color: var(--paper);
}

.client-name-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 8px 0 20px;
    padding: 0;
}

.client-name-rail a,
.client-name-rail span {
    font-family: "Sora", "Cairo", sans-serif;
    font-size: 0.88rem;
    color: var(--paper-mute);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.client-name-rail a:hover {
    color: var(--paper);
    border-bottom-color: rgba(198, 165, 106, 0.45);
}

/* Hide noisy sector carnival on phone/tablet */
@media (max-width: 1023px) {
    .client-cinema-section .client-sectors-label,
    .client-cinema-section .client-logo-panels {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .client-cinema-lead {
        min-height: clamp(320px, 42vw, 460px);
    }

    .client-cinema-companion {
        grid-template-columns: 180px minmax(0, 1fr);
        min-height: 110px;
    }
}

@media (min-width: 1024px) {
    .client-cinema-section {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 18px 20px;
        align-items: start;
    }

    .client-cinema-section .client-wall-head {
        grid-column: 1 / -1;
    }

    .client-cinema-lead {
        grid-column: 1;
        margin: 0;
        min-height: 440px;
        height: 100%;
    }

    .client-cinema-companion {
        grid-column: 2;
        grid-template-columns: 1fr;
        margin: 0;
        min-height: 440px;
    }

    .client-cinema-companion-media {
        min-height: 220px;
        flex: 1;
    }

    .client-cinema-companion-copy {
        padding: 20px 22px 24px;
        gap: 10px;
    }

    .client-supporting-label,
    .client-name-rail,
    .client-sectors-label,
    .client-logo-panels,
    .client-wall-cta--quiet {
        grid-column: 1 / -1;
    }

    .client-cinema-section .client-sectors-label,
    .client-cinema-section .client-logo-panels {
        display: block;
    }

    .client-cinema-section .client-logo-panels {
        display: block;
    }
}

/* ---------- PRIMARY CTAs (site-wide quiet paper fill) ---------- */
.btn-primary,
.action-btn.plan-cta.premium,
.action-btn.premium,
.nav-links .nav-btn {
    background: var(--cta-fill) !important;
    color: var(--cta-ink) !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.action-btn.plan-cta.premium:hover {
    background: #f5f1e8 !important;
}

/* ---------- DOCK FLAGSHIP ---------- */
.sticky-conversion-dock.dock-flagship {
    left: 50%;
    transform: translateX(-50%);
    width: min(360px, calc(100% - 24px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    border: 1px solid var(--line) !important;
    background: rgba(5, 6, 7, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    z-index: 900;
}

.dock-flagship .dock-action {
    min-height: 44px;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
    font-weight: 700;
}

.dock-flagship .dock-action.primary {
    background: var(--cta-fill) !important;
    color: var(--cta-ink) !important;
    flex: 1.2;
}

.dock-flagship .dock-action.whatsapp {
    background: transparent !important;
    border: 1px solid rgba(31, 157, 85, 0.45) !important;
    color: #7ddea8 !important;
    flex: 0.9;
}

.dock-flagship .dock-action.icon-only {
    display: none !important;
}

/* Content clearance above dock */
@media (max-width: 1099px) {
    body {
        padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
    }
}

@media (min-width: 1100px) {
    .sticky-conversion-dock.dock-flagship {
        display: none !important;
    }
}

/* scroll-silk */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .nav-container.nav-flagship,
    .sticky-conversion-dock.dock-flagship {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero-flagship .hero-cinema-crop,
    .hero-stage-media {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-flagship .hero-cinema-crop,
    .hero-stage-media,
    .orb-ink,
    .orb-gold,
    .nav-flagship .nav-drawer {
        animation: none !important;
        transition: none !important;
    }
}

/* Subtle brand settle on load */
@keyframes flagshipBrandIn {
    from { opacity: 0; letter-spacing: 0.18em; }
    to { opacity: 1; letter-spacing: 0.08em; }
}

@keyframes flagshipRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-flagship .hero-brand {
    animation: flagshipBrandIn 0.9s ease both;
}

.hero-flagship .hero-title {
    animation: flagshipRise 0.7s ease 0.12s both;
}

.hero-flagship .hero-subtitle,
.hero-flagship .hero-actions,
.hero-flagship .hero-prestige-line {
    animation: flagshipRise 0.7s ease 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-flagship .hero-brand,
    .hero-flagship .hero-title,
    .hero-flagship .hero-subtitle,
    .hero-flagship .hero-actions,
    .hero-flagship .hero-prestige-line {
        animation: none !important;
    }
}

/* --- Flagship v3 hotfix: brand clip + Cairo stage punch --- */
.hero.hero-flagship {
    overflow: clip;
    overflow: clip visible;
}

@supports not (overflow: clip) {
    .hero.hero-flagship {
        overflow: hidden;
    }
}

.hero-flagship .hero-content {
    overflow: visible !important;
    padding-inline: 2px;
}

.hero-flagship .hero-brand {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    letter-spacing: 0.045em !important;
    font-size: clamp(2.2rem, 12vw, 3.1rem) !important;
    width: max-content;
    max-width: calc(100% - 4px);
    box-sizing: border-box;
    overflow: visible !important;
    transform: none !important;
}

html[dir="rtl"] .hero-flagship .hero-brand {
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left !important;
}

html[dir="ltr"] .hero-flagship .hero-brand {
    margin-inline-end: 0;
    margin-inline-start: 0;
    text-align: left !important;
    letter-spacing: 0.06em !important;
}

@keyframes flagshipBrandIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-stage-media.hero-shot-viewport--cairo,
.hero-stage-media {
    /* expert-v4: no logo wash behind copy ? ink stage only */
    background-image: none !important;
    background-size: cover !important;
    background-position: 46% 8% !important;
    filter: none;
}

.hero-flagship .hero-stage-veil {
    background:
        linear-gradient(180deg, rgba(5, 6, 7, 0.28) 0%, rgba(5, 6, 7, 0.12) 32%, rgba(5, 6, 7, 0.78) 68%, rgba(5, 6, 7, 0.94) 100%) !important;
}

html[dir="rtl"] .hero-flagship .hero-stage-veil {
    background:
        linear-gradient(180deg, rgba(5, 6, 7, 0.28) 0%, rgba(5, 6, 7, 0.12) 32%, rgba(5, 6, 7, 0.78) 68%, rgba(5, 6, 7, 0.94) 100%),
        linear-gradient(270deg, rgba(5, 6, 7, 0.35) 0%, transparent 45%) !important;
}

@media (max-width: 767px) {
    .hero.hero-flagship {
        overflow: hidden;
    }

    .hero-flagship .hero-brand {
        font-size: clamp(2.15rem, 11.5vw, 2.85rem) !important;
        letter-spacing: 0.03em !important;
        max-width: 100%;
        padding-inline-end: 2px;
    }

    .dynamic-bg .orb-ink,
    .dynamic-bg .orb-gold,
    .dynamic-bg .perspective-bg-grid {
        opacity: 0.15 !important;
    }
}

/* Force paper CTAs over legacy violet !important stacks */
.hero.hero-editorial.hero-noir.hero-flagship .btn-primary,
.hero.hero-flagship .hero-actions .btn-primary,
body[data-release="aether-expert-v4b"] .hero-flagship .btn-primary {
    background: #ebe6dc !important;
    background-image: none !important;
    color: #0a0b0d !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

body[data-release="aether-expert-v4b"] .dock-flagship .dock-action.primary,
body[data-release="aether-expert-v4b"] .nav-flagship .nav-links .nav-btn {
    background: #ebe6dc !important;
    background-image: none !important;
    color: #0a0b0d !important;
    box-shadow: none !important;
}
/* overflow fix ? keep stage clipped, brand must fit */
.hero.hero-flagship {
    overflow: hidden !important;
}

/* ============================================================
   AETHER EXPERT v4 ? prestige without logo-wash under copy
   Equal priority: 390 / 768 / 1440
   ============================================================ */

body[data-release="aether-expert-v4b"] {
    --cta-fill: #c6a56a;
    --cta-ink: #0a0b0d;
    --paper: #f2eee6;
    --paper-mute: #a8a297;
    --gold: #c6a56a;
    --ink: #050607;
}

/* Kill every festival-logo background wash behind body copy */
.hero-expert-v4 .hero-stage-media,
.hero-expert-v4 .hero-shot-viewport--cairo,
.hero-stage-media.hero-shot-viewport--cairo {
    background-image: none !important;
    display: none !important;
}

.hero-expert-v4 .hero-stage-ink {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 78% 18%, rgba(198, 165, 106, 0.09) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 12% 88%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
        linear-gradient(165deg, #0a0c10 0%, #050607 48%, #07080b 100%);
}

.hero-expert-v4 .hero-stage-veil {
    background:
        linear-gradient(180deg, rgba(5, 6, 7, 0.35) 0%, rgba(5, 6, 7, 0.08) 40%, rgba(5, 6, 7, 0.55) 100%) !important;
}

.hero-expert-v4 .hero-stage-grain { display: none !important; }

.hero-shot-viewport--prestige {
    /* Clean audience plate ? no festival wordmark baked into the frame */
    background-image: url("../img/portfolio/cairo-audience.jpg?v=aether-expert-v4b") !important;
    background-size: cover !important;
    background-position: center 28% !important;
    background-color: #0a0b0d !important;
    filter: none !important;
}

.hero-expert-v4 .hero-cinema-caption {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.72;
}

/* Always show the controlled frame ? never hide on mobile */
.hero-expert-v4 .hero-visual-stage {
    display: block !important;
    min-height: 0;
}

.hero-expert-v4 .hero-visual-desktop { display: none !important; }

.hero-expert-v4 .hero-flagship-grid {
    align-items: center;
}

.hero-expert-v4 .hero-content {
    position: relative;
    z-index: 2;
    background: transparent;
}

.hero-expert-v4 .hero-brand,
.hero-expert-v4 .hero-title,
.hero-expert-v4 .hero-subtitle {
    text-shadow: none !important;
}

/* Gold CTA ? tech confidence, not cream plastic */
body[data-release="aether-expert-v4b"] .hero-flagship .btn-primary,
body[data-release="aether-expert-v4b"] .hero.hero-editorial.hero-noir.hero-flagship .btn-primary,
body[data-release="aether-expert-v4b"] .dock-flagship .dock-action.primary,
body[data-release="aether-expert-v4b"] .nav-flagship .nav-links .nav-btn {
    background: var(--cta-fill) !important;
    background-image: none !important;
    color: var(--cta-ink) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

body[data-release="aether-expert-v4b"] .hero-flagship .btn-primary:hover {
    background: #d4b57a !important;
    transform: translateY(-1px);
}

body[data-release="aether-expert-v4b"] .hero-flagship .btn-secondary {
    border-color: rgba(198, 165, 106, 0.4) !important;
}

/* Clients lead uses prestige stage photo, not logo wash */
.client-cinema-lead-media {
    background-image: url("../img/portfolio/cairo-audience.jpg?v=aether-expert-v4b") !important;
    background-size: cover !important;
    background-position: center 30% !important;
}

.client-cinema-companion-media {
    background-image: url("../img/portfolio/ghanim-realestate-shot.png?v=aether-expert-v4b") !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* Proof reviews ? typography first */
.testimonials-expert .testimonial-photo { display: none !important; }
.proof-review-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(18, 19, 22, 0.95) 0%, rgba(10, 11, 13, 0.98) 100%);
    border: 1px solid rgba(198, 165, 106, 0.18);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
}
.proof-review-card .testimonial-card-body {
    padding: 22px 22px 20px;
}
.proof-review-card .testimonial-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.proof-review-card .review-stars {
    color: var(--gold);
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.testimonial-grid--proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.portfolio-shot {
    background-size: cover !important;
    background-position: center top !important;
    background-color: #0a0b0d;
}

/* Nav breathing room */
body[data-release="aether-expert-v4b"] .nav-container.nav-flagship {
    gap: 10px;
    padding-inline: 14px;
}
body[data-release="aether-expert-v4b"] .nav-flagship .brand-word {
    letter-spacing: 0.14em;
    font-size: 0.95rem;
}
body[data-release="aether-expert-v4b"] .nav-menu-toggle,
body[data-release="aether-expert-v4b"] .lang-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
}

/* ---------- 390 phone ---------- */
@media (max-width: 767px) {
    .hero-expert-v4.hero.hero-flagship {
        min-height: auto;
    }

    .hero-expert-v4 .hero-flagship-grid {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 22px;
        min-height: auto !important;
        padding:
            calc(92px + env(safe-area-inset-top, 0px))
            18px
            calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .hero-expert-v4 .hero-content {
        max-width: none;
        order: 1;
    }

    .hero-expert-v4 .hero-visual-stage {
        order: 2;
        width: 100%;
        min-height: 0 !important;
        height: auto !important;
    }

    .hero-expert-v4 .hero-cinema,
    .hero-expert-v4 .hero-cinema-frame,
    .hero-expert-v4 .hero-visual-stage {
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-expert-v4 .hero-cinema-frame {
        height: clamp(200px, 52vw, 280px) !important;
        min-height: clamp(200px, 52vw, 280px) !important;
        border-radius: 6px;
        border: 1px solid rgba(198, 165, 106, 0.28);
        overflow: hidden;
    }

    .hero-expert-v4 .hero-cinema-crop {
        height: 100%;
        min-height: inherit;
    }

    .hero-expert-v4 .hero-brand {
        font-size: clamp(2.35rem, 12vw, 3rem) !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 14px !important;
    }

    .hero-expert-v4 .hero-title {
        font-size: 1.28rem !important;
        line-height: 1.4 !important;
        max-width: none !important;
    }

    .hero-expert-v4 .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 18px !important;
    }

    .hero-expert-v4 .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-expert-v4 .btn-primary,
    .hero-expert-v4 .btn-secondary {
        width: 100% !important;
    }

    .hero-expert-v4 .hero-prestige-line {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
        font-size: 0.74rem !important;
    }

    .hero-expert-v4 .hero-stage {
        opacity: 1 !important;
    }

    .testimonial-grid--proof {
        grid-template-columns: 1fr;
    }

    .client-cinema-lead {
        min-height: 280px;
    }

    body[data-release="aether-expert-v4b"] {
        padding-bottom: calc(var(--dock-h, 64px) + env(safe-area-inset-bottom, 0px));
    }

    body[data-release="aether-expert-v4b"] .hero-stage-media {
        display: none !important;
        background-image: none !important;
        opacity: 0 !important;
    }
}

/* ---------- 768 tablet ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-expert-v4 .hero-flagship-grid {
        grid-template-columns: 1fr !important;
        gap: 28px;
        padding: 110px 32px 48px !important;
        align-items: start !important;
    }

    .hero-expert-v4 .hero-visual-stage {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
    }

    .hero-expert-v4 .hero-cinema-frame {
        height: min(42vh, 360px) !important;
        min-height: 280px !important;
    }

    .hero-expert-v4 .hero-content {
        max-width: 36rem;
        margin-inline: auto;
        text-align: start;
    }

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

/* ---------- 1024+ / 1440 desktop ---------- */
@media (min-width: 1024px) {
    .hero-expert-v4 .hero-flagship-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
        gap: clamp(28px, 4vw, 56px);
        align-items: center !important;
        padding: clamp(110px, 14vh, 150px) clamp(24px, 4vw, 48px) clamp(72px, 9vh, 110px) !important;
    }

    .hero-expert-v4 .hero-visual-stage {
        display: block !important;
    }

    .hero-expert-v4 .hero-cinema-frame {
        height: min(58vh, 520px) !important;
        min-height: min(58vh, 520px) !important;
    }

    .hero-expert-v4 .hero-brand {
        font-size: clamp(3.2rem, 6vw, 5.4rem) !important;
    }

    .hero-expert-v4 .hero-title {
        font-size: clamp(1.45rem, 2.2vw, 2.05rem) !important;
    }

    .testimonial-grid--proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1440px) {
    .hero-expert-v4 .hero-flagship-grid {
        max-width: 1320px;
    }
}

@media (max-width: 767px) {
    .hero-flagship .hero-stage {
        opacity: 1 !important;
    }
}

/* Sector tiles: quieter rail, less template-grid */
body[data-release="aether-expert-v4b"] .client-logo-panel-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-start;
}
body[data-release="aether-expert-v4b"] .client-logo-tile {
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(198, 165, 106, 0.16);
    border-radius: 999px;
}
body[data-release="aether-expert-v4b"] .client-logo-tile b {
    font-size: 0.78rem;
}
body[data-release="aether-expert-v4b"] .client-logo-tile small {
    display: none;
}
body[data-release="aether-expert-v4b"] .client-logo-tile i {
    font-size: 0.75rem;
    opacity: 0.7;
}


/* ============================================================
   AETHER CAIRO IDENTITY v5
   - Logo + Arabic name as crisp badge INSIDE prestige frames
   - Never festival ghost wash under AETHER hero copy
   - Portfolio: in-place iframe for demos, shot fallback otherwise
   Equal: 390 / 768 / 1440
   ============================================================ */

body[data-release="aether-live-pane-v15"] {
    --cta-fill: #c6a56a;
    --cta-ink: #0a0b0d;
    --paper: #f2eee6;
    --paper-mute: #a8a297;
    --gold: #c6a56a;
    --ink: #050607;
}

/* Keep stage wash killed behind hero paragraphs */
.hero-cairo-v5 .hero-stage-media,
.hero-cairo-v5 .hero-shot-viewport--cairo,
.hero-stage-media.hero-shot-viewport--cairo {
    background-image: none !important;
    display: none !important;
}

.hero-cairo-v5 .hero-stage-ink {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 78% 18%, rgba(198, 165, 106, 0.09) 0%, transparent 58%),
        radial-gradient(ellipse 55% 45% at 12% 88%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
        linear-gradient(165deg, #0a0c10 0%, #050607 48%, #07080b 100%);
}

.hero-shot-viewport--prestige {
    background-image: url("../img/portfolio/cairo-film-ui.png?v=aether-live-pane-v15") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-color: #0a0b0d !important;
    filter: none !important;
}

.cairo-prestige-frame {
    position: relative;
    overflow: hidden;
}

.cairo-identity-badge {
    position: absolute;
    z-index: 3;
    inset-inline-start: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: min(78%, 280px);
    padding: 10px 12px 12px;
    border-radius: 8px;
    border: 1px solid rgba(198, 165, 106, 0.45);
    background: rgba(5, 6, 7, 0.88);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cairo-identity-logo {
    display: block;
    width: min(100%, 200px);
    height: auto;
    object-fit: contain;
    object-position: right center;
    filter: none;
    opacity: 1;
}

.cairo-identity-name {
    margin: 0;
    font-family: "Cairo", "Syne", sans-serif;
    font-size: clamp(0.82rem, 2.2vw, 1.05rem);
    font-weight: 800;
    line-height: 1.35;
    color: #f2eee6;
    letter-spacing: 0;
}

.cairo-identity-badge--lead {
    inset-inline-start: 14px;
    top: 14px;
    bottom: auto;
    max-width: min(70%, 260px);
}

.cairo-identity-badge--pane {
    inset-inline-start: 10px;
    top: 10px;
    max-width: min(72%, 240px);
    padding: 8px 10px 10px;
}

.hero-cairo-v5 .hero-cinema-caption {
    font-family: "Cairo", "Sora", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.9;
    color: var(--paper);
}

.client-cinema-lead-media {
    background-image: url("../img/portfolio/cairo-film-ui.png?v=aether-live-pane-v15") !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* ---- Portfolio in-place preview ---- */
body[data-release="aether-live-pane-v15"] .monitor-screen iframe,
body[data-release="aether-live-pane-v15"] .portfolio-frame {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    background: #0a0b0d;
    opacity: 1;
    transition: opacity 0.28s ease;
}

body[data-release="aether-live-pane-v15"] .portfolio-frame[hidden] {
    display: none !important;
}

body[data-release="aether-live-pane-v15"] .portfolio-shot {
    z-index: 1;
    transition: opacity 0.28s ease;
}

body[data-release="aether-live-pane-v15"] .portfolio-shot.is-underlay {
    opacity: 1;
    z-index: 1;
}

body[data-release="aether-live-pane-v15"] .portfolio-shot.is-hidden {
    opacity: 0;
    pointer-events: none;
}

body[data-release="aether-live-pane-v15"] .monitor-3d {
    transform: none !important;
    border-radius: 8px;
    border: 1px solid rgba(198, 165, 106, 0.28);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

body[data-release="aether-live-pane-v15"] .monitor-glow {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

body[data-release="aether-live-pane-v15"] .monitor-base {
    opacity: 0.2;
}

body[data-release="aether-live-pane-v15"] .film-frame-header {
    background: #0d0e11;
    border-bottom: 1px solid rgba(198, 165, 106, 0.18);
}

body[data-release="aether-live-pane-v15"] .project-btn {
    border-radius: 8px;
    border: 1px solid rgba(198, 165, 106, 0.18);
    background: rgba(10, 11, 13, 0.72);
    box-shadow: none;
    transform: none !important;
}

body[data-release="aether-live-pane-v15"] .project-btn:hover {
    border-color: rgba(198, 165, 106, 0.4);
    background: rgba(198, 165, 106, 0.08);
    transform: none !important;
    box-shadow: none;
}

body[data-release="aether-live-pane-v15"] .project-btn.active {
    border-color: rgba(198, 165, 106, 0.55);
    background: rgba(198, 165, 106, 0.12);
    box-shadow: inset 0 0 0 1px rgba(198, 165, 106, 0.2);
    transform: none !important;
}

body[data-release="aether-live-pane-v15"] .project-btn .p-num {
    color: var(--gold);
    opacity: 0.9;
}

body[data-release="aether-live-pane-v15"] .portfolio-visit {
    border-radius: 10px;
    border: 1px solid rgba(198, 165, 106, 0.4);
    background: rgba(198, 165, 106, 0.12);
    color: #f2eee6 !important;
    box-shadow: none;
}

body[data-release="aether-live-pane-v15"] .portfolio-visit:hover {
    background: rgba(198, 165, 106, 0.22);
    box-shadow: none;
}

body[data-release="aether-live-pane-v15"] .hero-flagship .btn-primary,
body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.primary,
body[data-release="aether-live-pane-v15"] .nav-flagship .nav-links .nav-btn {
    background: var(--cta-fill) !important;
    background-image: none !important;
    color: var(--cta-ink) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

body[data-release="aether-live-pane-v15"] .client-logo-panel-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: flex-start;
}
body[data-release="aether-live-pane-v15"] .client-logo-tile {
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(198, 165, 106, 0.16);
    border-radius: 999px;
}
body[data-release="aether-live-pane-v15"] .client-logo-tile b { font-size: 0.78rem; }
body[data-release="aether-live-pane-v15"] .client-logo-tile small { display: none; }
body[data-release="aether-live-pane-v15"] .client-logo-tile i { font-size: 0.75rem; opacity: 0.7; }

@media (max-width: 767px) {
    .cairo-identity-badge {
        inset-inline-start: 8px;
        top: 8px;
        max-width: min(86%, 220px);
        padding: 8px 9px 9px;
        gap: 6px;
    }
    .cairo-identity-logo { width: min(100%, 156px); }
    .cairo-identity-name { font-size: 0.78rem; }
    .hero-cairo-v5 .hero-cinema-frame {
        height: clamp(210px, 54vw, 290px) !important;
        min-height: clamp(210px, 54vw, 290px) !important;
    }
    body[data-release="aether-live-pane-v15"] .monitor-3d {
        height: min(52vh, 380px) !important;
        min-height: 280px !important;
    }
    body[data-release="aether-live-pane-v15"] .monitor-screen {
        min-height: 240px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cairo-identity-badge { max-width: min(70%, 250px); }
    body[data-release="aether-live-pane-v15"] .monitor-3d {
        min-height: 360px;
    }
}

@media (min-width: 1024px) {
    .cairo-identity-badge {
        inset-inline-start: 16px;
        top: 16px;
        max-width: 280px;
    }
    .cairo-identity-logo { width: min(100%, 220px); }
}

/* ---- portfolio-fix-v6: kill clipped lead bleed over sticky header ---- */
body[data-release="aether-live-pane-v15"] .nav-container.nav-flagship {
    background: #050607 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10040 !important;
    isolation: isolate;
}

body[data-release="aether-live-pane-v15"] .page-top-veil {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(12px + 64px + env(safe-area-inset-top, 0px));
    background: #050607;
    z-index: 10030;
    pointer-events: none;
}

body[data-release="aether-live-pane-v15"] .interactive-portfolio {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}

body[data-release="aether-live-pane-v15"] .interactive-portfolio .section-title,
body[data-release="aether-live-pane-v15"] .portfolio-lead {
    position: relative;
    z-index: 0;
    transform: none !important;
    margin-top: 0;
}

body[data-release="aether-live-pane-v15"] .portfolio-lead {
    margin-top: 10px;
    margin-bottom: 24px;
}

body[data-release="aether-live-pane-v15"] .project-btn {
    overflow: hidden;
    white-space: normal;
    line-height: 1.35;
}

@media (max-width: 900px) {
    body[data-release="aether-live-pane-v15"] .reveal,
    body[data-release="aether-live-pane-v15"] .reveal.active {
        /* Opacity-only reveals: transforms cause mobile compositing ghosts over fixed nav */
        transform: none !important;
    }

    body[data-release="aether-live-pane-v15"] .interactive-portfolio {
        padding-top: 56px;
    }

    body[data-release="aether-live-pane-v15"] .portfolio-lead {
        margin-top: 12px !important;
        margin-bottom: 20px !important;
        font-size: 0.95rem;
        line-height: 1.7;
        padding-inline: 4px;
    }

    body[data-release="aether-live-pane-v15"] .showroom-controls {
        position: relative;
        z-index: 2;
    }

    body[data-release="aether-live-pane-v15"] .project-btn {
        max-width: min(78vw, 260px);
    }
}

/* ============================================================
   aether-live-pane-v15 — professional chrome + scroll-top dock
   ============================================================ */

body[data-release="aether-live-pane-v15"] .browser-url {
    font-family: "Sora", "Cairo", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(242, 238, 230, 0.72);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(198, 165, 106, 0.16);
    border-radius: 999px;
    max-width: min(92%, 420px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: start;
}

body[data-release="aether-live-pane-v15"] .browser-url[data-chrome-mode="preview"] {
    color: rgba(198, 165, 106, 0.92);
}

body[data-release="aether-live-pane-v15"] .monitor-glow {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}

body[data-release="aether-live-pane-v15"] .sticky-conversion-dock.dock-flagship {
    width: min(420px, calc(100% - 20px));
    display: flex;
    align-items: center;
    justify-content: stretch;
    gap: 6px !important;
    padding: 6px !important;
}

body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.dock-scroll-top {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(198, 165, 106, 0.28) !important;
    background: rgba(198, 165, 106, 0.08) !important;
    color: #f2eee6 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 1;
    box-shadow: none !important;
}

body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.dock-scroll-top:hover,
body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.dock-scroll-top:focus-visible {
    background: rgba(198, 165, 106, 0.18) !important;
    border-color: rgba(198, 165, 106, 0.5) !important;
    outline: none;
}

body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.dock-scroll-top:focus-visible {
    box-shadow: 0 0 0 2px rgba(198, 165, 106, 0.35) !important;
}

body[data-release="aether-live-pane-v15"] .dock-scroll-label {
    font-size: 0.82rem;
    font-weight: 700;
}

body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.whatsapp {
    flex: 1 1 auto;
}

body[data-release="aether-live-pane-v15"] .dock-flagship .dock-action.primary {
    flex: 1 1 auto;
}

@media (max-width: 420px) {
    body[data-release="aether-live-pane-v15"] .dock-scroll-label {
        display: none;
    }
    body[data-release="aether-live-pane-v15"] .browser-url {
        font-size: 0.65rem;
        max-width: 88%;
        padding-inline: 10px;
    }
}

@media (max-width: 1099px) {
    body[data-release="aether-live-pane-v15"] {
        --dock-h: 68px;
        padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-release="aether-live-pane-v15"] .portfolio-frame,
    body[data-release="aether-live-pane-v15"] .portfolio-shot {
        transition: none !important;
    }
}

@media (min-width: 1100px) {
    body[data-release="aether-live-pane-v15"] .sticky-conversion-dock.dock-flagship {
        display: none !important;
    }
}

/* ============================================================
   aether-live-pane-v15 — hero order + ZERO overlays on preview
   ============================================================ */

.hero-about-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin: 0 0 12px;
    font-family: "Cairo", "Sora", sans-serif;
    font-size: clamp(0.82rem, 2.1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.45;
    color: rgba(242, 238, 230, 0.62);
}

.hero-about-kicker a {
    color: var(--gold, #c6a56a);
    text-decoration: none;
    border-bottom: 1px solid rgba(198, 165, 106, 0.45);
    padding-bottom: 1px;
}

.hero-about-kicker a:hover,
.hero-about-kicker a:focus-visible {
    color: #f2eee6;
    border-bottom-color: rgba(242, 238, 230, 0.7);
}

.hero-clean-v8 .hero-title {
    margin-top: 0;
}

.cairo-prestige-frame--clean .cairo-identity-badge,
.monitor-screen .cairo-identity-badge,
#portfolioIdentity {
    display: none !important;
}

.hero-cinema-caption-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 0 2px;
}

.hero-cinema-logo {
    display: block;
    width: min(160px, 42vw);
    height: auto;
    object-fit: contain;
}

.hero-cinema-caption-block .hero-cinema-caption {
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: "Cairo", "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    color: #f2eee6;
    opacity: 0.95;
}

.client-cinema-lead-logo {
    display: block;
    width: min(140px, 38vw);
    height: auto;
    margin-bottom: 10px;
    object-fit: contain;
}

body[data-release="aether-live-pane-v15"] .monitor-screen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body[data-release="aether-live-pane-v15"] .monitor-screen > *:not(.portfolio-frame):not(.portfolio-shot) {
    display: none !important;
}

body[data-release="aether-live-pane-v15"] .portfolio-frame.is-active:not([hidden]) {
    z-index: 3;
}

body[data-release="aether-live-pane-v15"] .monitor-3d[data-preview-state="loading"] .portfolio-frame.is-active {
    opacity: 0 !important;
}

body[data-release="aether-live-pane-v15"] .monitor-3d[data-preview-state="loading"] .portfolio-shot.is-underlay {
    opacity: 1 !important;
    visibility: visible !important;
}

body[data-release="aether-live-pane-v15"] .monitor-3d[data-preview-state="frame"] .portfolio-frame.is-active {
    opacity: 1 !important;
}

body[data-release="aether-live-pane-v15"] .portfolio-shot.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 760px) {
    .hero-about-kicker {
        margin-bottom: 10px;
    }

    .hero-cinema-caption-block {
        margin-top: 12px;
    }

    /* Preview window FIRST on phone — then client chips */
    body[data-release="aether-live-pane-v15"] .showroom-container {
        display: flex !important;
        flex-direction: column !important;
    }

    body[data-release="aether-live-pane-v15"] .showroom-monitor-wrapper {
        order: -1;
        width: 100% !important;
        min-height: min(58vh, 420px) !important;
    }

    body[data-release="aether-live-pane-v15"] .showroom-controls {
        order: 2;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 6px;
    }

    body[data-release="aether-live-pane-v15"] .showroom-controls .project-btn {
        flex: 0 0 auto;
        min-width: min(78vw, 260px);
        white-space: normal;
    }

    body[data-release="aether-live-pane-v15"] .custom-project-btn {
        flex: 0 0 auto;
        min-width: 200px;
    }
}

@media (min-width: 761px) and (max-width: 1099px) {
    body[data-release="aether-live-pane-v15"] .showroom-container {
        display: grid !important;
        grid-template-columns: 1fr 280px;
        gap: 18px;
        align-items: stretch;
    }

    body[data-release="aether-live-pane-v15"] .showroom-monitor-wrapper {
        order: 0;
        min-height: 480px !important;
    }

    body[data-release="aether-live-pane-v15"] .showroom-controls {
        order: 0;
        max-height: 520px;
        overflow-y: auto;
    }
}