/* ==========================================================================
   1. GLOBAL RESET, THEME VARIABLES & MULTI-LANGUAGE ENGINE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

:root {
    /* English Viewport - Clean, Crisp Typography Dimensions */
    --base-font-size: 15px;
    --hero-title-size: 3.3rem;
    --hero-desc-size: 1.15rem;
    --hero-badge-size: 11px;
    
    --section-title-size: 2.15rem;
    --section-desc-size: 0.95rem;   
    --section-tag-size: 11px;
    
    --card-title-size: 13px;
    --card-desc-size: 11.5px;
    
    --btn-font-size: 13px;        
    --letter-spacing: 0.15em;
    --font-primary: 'Sora', 'Inter', sans-serif;
}

html[lang="ar"] {
    /* Arabic Viewport - Robust Dimensions for Script Glyphs Legibility */
    --base-font-size: 19.5px;      
    --hero-title-size: 4.9rem;    
    --hero-desc-size: 1.6rem;     
    --hero-badge-size: 15px;
    
    --section-title-size: 2.85rem;
    --section-desc-size: 1.15rem; 
    --section-tag-size: 14px;
    
    --card-title-size: 16px;
    --card-desc-size: 13.5px;
    
    --btn-font-size: 15.5px;      
    --letter-spacing: 0;          
    --font-primary: 'Noto Sans Arabic', 'IBM Plex Sans Arabic', sans-serif;
    
    direction: rtl;
    text-align: right;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background: #020617;
    font-size: var(--base-font-size);
    overflow-x: hidden;
}

/* --- Auto-Translation Engine Pseudo Classes --- */
html[lang="en"] .loc::after { content: attr(data-en); font-family: 'Sora', sans-serif; }
html[lang="ar"] .loc::after { content: attr(data-ar); font-family: 'IBM Plex Sans Arabic', sans-serif; letter-spacing: 0; }
html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* ==========================================================================
   2. HERO SECTION, BACKGROUNDS & OVERLAYS (MODIFIED TO 80VH)
   ========================================================================== */
.stralen-hero-section {
    position: relative;
    width: 100%;
    min-height: 80vh; /* Changed height to 80vh */
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #020617;
    padding: 80px 0 60px; /* Refined padding profile to complement 80vh look */
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    background: url('../images/Contact-img/1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.04);
    animation: heroZoom 18s ease-in-out infinite alternate;
    z-index: 1;
}

.hero-parallax-img {
    animation: cinematicZoom 20s ease-out infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1.04); }
    to { transform: scale(1.10); }
}

@keyframes cinematicZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.hero-overlay-layer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(2, 6, 23, 0.82),
        rgba(2, 6, 23, 0.90),
        rgba(2, 6, 23, 0.98)
    );
    z-index: 2;
}

.hero-wrapper {
    position: relative;
    z-index: 5;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    max-width: 720px;
}

html[dir="rtl"] .hero-content {
    text-align: right;
}

/* ==========================================================================
   3. HERO ELEMENTS CONFIGURATION (TYPOGRAPHY & UTILITIES)
   ========================================================================== */
.hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    margin-bottom: 24px;
}

.hero-tag span {
    color: #10b981;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-heading {
    font-size: 80px;
    line-height: 1.02;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -3px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.70), 0 8px 35px rgba(0,0,0,0.45);
}

.accent-text {
    color: #10b981;
    text-shadow: 0 4px 18px rgba(0,0,0,0.75), 0 0 35px rgba(16,185,129,0.18);
}

.hero-description {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    margin-top: 24px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

html[dir="rtl"] .hero-description {
    direction: rtl;
}

/* Explicit Font Matrix Mappers */
.hero-badge-text { font-size: var(--hero-badge-size); }
.hero-main-title { font-size: var(--hero-title-size); }
.hero-main-desc { font-size: var(--hero-desc-size); }

.section-main-title, .mfg-main-title, .quality-main-title, .eco-main-title, .strat-main-title { font-size: var(--section-title-size); }
.section-main-desc, .mfg-main-desc, .quality-card-desc, .eco-main-desc, .strat-main-desc { font-size: var(--section-desc-size); }
.ind-tag-text, .mfg-tag-text, .quality-tag-text { font-size: var(--section-tag-size); }

.grid-card-title, .quality-card-title, .eco-list-text { font-size: var(--card-title-size); }
.grid-card-desc, .stat-label { font-size: var(--card-desc-size); }
.stat-value, .quality-footer-text, .strat-tag-text { font-size: var(--card-title-size); }

/* ==========================================================================
   4. BUTTON STYLING ENGINE (CLASSIC ROW & MODERN ECO-SYSTEM)
   ========================================================================== */
.btn-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    padding: 15px 28px;
    border: 2px solid #10b981;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    text-decoration: none;
    transition: all .4s ease;
}

.hero-btn span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all .4s ease;
}

.hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #10b981;
    transform: translateX(-101%);
    transition: all .45s cubic-bezier(.4,0,.2,1);
    z-index: 1;
}

.hero-btn:hover::before { transform: translateX(0%); }
.hero-btn:hover span { color: #020617; }
.hero-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(16,185,129,0.22); }

html[dir="rtl"] .hero-btn::before { transform: translateX(101%); }
html[dir="rtl"] .hero-btn:hover::before { transform: translateX(0%); }

/* Modern Layout Buttons Systems Container */
.btn-container {
    display: flex;
    flex-direction: row;      
    gap: 1.5rem;              
    align-items: center;
    flex-wrap: wrap;          
    margin-top: 2.5rem;
}

html[lang="ar"] [dir="rtl"] .btn-container { flex-direction: row-reverse; }
html[lang="ar"] [dir="rtl"] .hero-badge, 
html[lang="ar"] [dir="rtl"] .section-header { flex-direction: row-reverse; }

/* 48px Compact Look Actions Controls Base Engine */
.btn-custom { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 250px;              
    height: 48px;              
    background: #0f172a; 
    border-radius: 4px; 
    overflow: hidden; 
    z-index: 1; 
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.2);
}

.btn-text { 
    font-size: var(--btn-font-size); 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: var(--letter-spacing); 
    color: white; 
    z-index: 10; 
}

/* Tron Trace Runner Path Spans */
.btn-snake span:nth-child(n+2) { position: absolute; background: #10b981; transition: 0.5s; }
.btn-snake span:nth-child(2) { top: 0; left: -100%; width: 100%; height: 2px; animation: snake1 3s linear infinite; }
.btn-snake span:nth-child(3) { top: -100%; right: 0; width: 2px; height: 100%; animation: snake2 3s linear infinite; animation-delay: 0.75s; }
.btn-snake span:nth-child(4) { bottom: 0; right: -100%; width: 100%; height: 2px; animation: snake3 3s linear infinite; animation-delay: 1.5s; }
.btn-snake span:nth-child(5) { bottom: -100%; left: 0; width: 2px; height: 100%; animation: snake4 3s linear infinite; animation-delay: 2.25s; }

@keyframes snake1 { 0% { left: -100%; } 50%,100% { left: 100%; } }
@keyframes snake2 { 0% { top: -100%; } 50%,100% { top: 100%; } }
@keyframes snake3 { 0% { right: -100%; } 50%,100% { right: 100%; } }
@keyframes snake4 { 0% { bottom: -100%; } 50%,100% { bottom: 100%; } }

html[lang="ar"] .btn-snake span:nth-child(3) { left: 0; right: auto; }
html[lang="ar"] .btn-snake span:nth-child(5) { right: 0; left: auto; }

/* Organic Fluid Interactive Fill Layer */
.btn-liquid-fill::before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 0; 
    height: 0; 
    background: #10b981; 
    border-radius: 50%; 
    transform: translate(-50%, -50%); 
    transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
    z-index: -1; 
}
.btn-liquid-fill:hover::before { width: 420px; height: 420px; }

/* ==========================================================================
   5. PREMIUM INTERACTIONS, CARDS & MANUFACTURING DECORATIONS
   ========================================================================== */
html[lang="ar"] .mfg-content { 
    border-left: 0; border-right: 2px solid #10b981; 
    padding-left: 0; padding-right: 2rem; text-align: right; 
}

/* Perspective 3D Interactive Setup */
.perspective-1000 { perspective: 1000px; }
.mfg-card-inner { transition: 0.7s cubic-bezier(0.25, 1, 0.5, 1); transform-style: preserve-3d; }
.mfg-3d-card:hover .mfg-card-inner { 
    background: #10b981; 
    transform: rotateY(-15deg) rotateX(10deg) translateY(-10px); 
}

html[lang="ar"] .mfg-3d-card:hover .mfg-card-inner { 
    transform: rotateY(15deg) rotateX(10deg) translateY(-10px); 
}

/* Micro Hover Mechanics Assets */
.custom-grid-card {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.custom-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(15, 23, 42, 0.12);
}
.custom-grid-card .grid-bg-img {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.custom-grid-card:hover .grid-bg-img {
    transform: scale(1.08);
}

.eco-luxury-card, .strat-luxury-card {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.eco-luxury-card:hover, .strat-luxury-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 45px rgba(15, 23, 42, 0.14);
}

/* ==========================================================================
   6. SAUDI OPS CTA & FOOTER LAYOUT
   ========================================================================== */
.ops-section { 
    background-color: #0f172a; 
    padding: 60px 0; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}
.ops-container { 
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto; 
}
.ops-flex-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 40px; 
}

html[lang="ar"] [dir="rtl"] .hero-wrapper, 
html[lang="ar"] [dir="rtl"] .ops-flex-wrapper { 
    flex-direction: row-reverse; 
}

.footer-main-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 2rem; 
    width: 90%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* ==========================================================================
   7. GLOBAL FIXED SCROLL-TO-TOP BUTTON
   ========================================================================== */
#scrollToTopBtn {
    position: fixed;
    bottom: 25px;
    width: 46px;
    height: 46px;
    background-color: #10b981;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

html[dir="ltr"] #scrollToTopBtn, 
body:not([dir="rtl"]) #scrollToTopBtn {
    right: 25px;
    left: auto;
}

html[dir="rtl"] #scrollToTopBtn,
body[dir="rtl"] #scrollToTopBtn {
    left: 25px;
    right: auto;
}

#scrollToTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollToTopBtn:hover {
    background-color: #0f172a;
    transform: translateY(-3px);
}

#scrollToTopBtn i {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    line-height: 1;
    margin-top: 0 !important;
}

/* ==========================================================================
   8. QUALITY SECTION & STRUCTURAL OVERLAP GRID
   ========================================================================== */
#quality {
    width: 100%;
}

#quality .container,
.strategy-ecosystem-section .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    transition: width 0.3s ease, max-width 0.3s ease;
}

/* Structural Card Hover Reset Layer Animations */
.overlap-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 4px;
    padding: 2.5rem; /* p-10 equivalent */
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.overlap-card .absolute.inset-0 {
    position: absolute;
    inset: 0;
    background-color: #0f172a;
    transform: translateX(-101%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.overlap-card:hover .absolute.inset-0 {
    transform: translateX(0);
}

/* RTL Adjustments for Sliding Overlay */
html[lang="ar"] .overlap-card .absolute.inset-0 {
    transform: translateX(101%);
}
html[lang="ar"] .overlap-card:hover .absolute.inset-0 {
    transform: translateX(0);
}

.overlap-card .relative.z-10 {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   9. STRATEGY ECOSYSTEM SELECTION CONFIGURATIONS (SMALL GREEN BOX IMPLEMENTATION)
   ========================================================================== */
.strategy-ecosystem-section {
    width: 100%;
}

.eco-luxury-card, 
.strat-luxury-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eco-luxury-card {
    padding: 2.5rem;
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Made smaller to match design criteria footprints */
.strat-luxury-card {
    background-color: #059669; /* emerald-600 */
    border-radius: 1rem;
    overflow: hidden;
}

.dynamic-stack {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tags-pool {
    margin-top: auto;
}

/* ==========================================================================
   10. MULTI-LANGUAGE RTL SPECIFIC ALIGNMENTS
   ========================================================================== */
html[lang="ar"] .text-center {
    text-align: center !important;
}

html[lang="ar"] .eco-main-title,
html[lang="ar"] .eco-main-desc,
html[lang="ar"] .strat-main-title,
html[lang="ar"] .strat-main-desc,
html[lang="ar"] .dynamic-stack {
    text-align: right !important;
    direction: rtl !important;
}

html[lang="ar"] .feature-row,
html[lang="ar"] .target-tag {
    flex-direction: row-reverse !important;
}

/* ==========================================================================
   11. MANUFACTURING BLOCK BASE ENGINEERING
   ========================================================================== */
#manufacturing {
    width: 100%;
    position: relative;
}

#manufacturing .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    transition: width 0.3s ease, max-width 0.3s ease;
}

/* Left Accent Content Border Setup (Default LTR) */
.mfg-content {
    border-left: 1px solid rgba(16, 185, 129, 0.2);
    padding-left: 2rem;
    padding-right: 0;
    text-align: left;
}

/* 3D Perspective Grid Matrix Configuration */
.matrix-3d-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Structural Card Setup */
.mfg-3d-card {
    height: 100%;
}

.mfg-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
                background 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

html[lang="ar"] .mfg-content { 
    border-left: 0 !important; 
    border-right: 1px solid rgba(16, 185, 129, 0.2) !important; 
    padding-left: 0 !important; 
    padding-right: 2rem !important; 
    text-align: right !important; 
}

html[lang="ar"] .dynamic-metrics { direction: rtl !important; }
html[lang="ar"] .mfg-tag-text, html[lang="ar"] .mfg-main-title { text-align: right !important; }

html[lang="ar"] .space-y-3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
html[lang="ar"] [dir="rtl"] .space-y-3 {
    align-items: flex-end;
}

/* ==========================================================================
   12. MEDIA QUERIES RESPONSIVE ENGINE (COMPREHENSIVE VIEWPORT CASCADE)
   ========================================================================== */

/* --- LARGE SCREEN INTERMEDIATE MATRIX (max-width: 1200px) --- */
@media screen and (max-width: 1200px) {
    :root {
        --hero-title-size: 3rem;
        --section-title-size: 2rem;
    }
    html[lang="ar"] {
        --hero-title-size: 4.2rem;
        --section-title-size: 2.5rem;
    }
    .hero-heading {
        font-size: 68px;
    }
    .hero-description {
        font-size: 16px;
    }
}

/* --- LAPTOP / WORKSTATIONS BREAKPOINT (max-width: 992px) --- */
@media screen and (max-width: 992px) {
    :root {
        --base-font-size: 14px;
        --hero-title-size: 2.6rem;
        --hero-desc-size: 1.1rem;
        --section-title-size: 1.8rem;
    }
    html[lang="ar"] {
        --base-font-size: 18px;
        --hero-title-size: 3.6rem;
        --hero-desc-size: 1.4rem;
        --section-title-size: 2.2rem;
    }
    .stralen-hero-section {
        min-height: auto;
        height: auto;
        padding: 95px 0 70px;
    }
    .hero-wrapper, .ops-flex-wrapper {
        width: 92%;
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
    }
    .hero-heading {
        font-size: 54px;
        line-height: 1.06;
    }
    .hero-description {
        font-size: 15px;
        line-height: 1.8;
        max-width: 100%;
    }
    .btn-row {
        justify-content: center;
    }
    .btn-custom {
        width: 220px;
    }
    .footer-main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grids & Cards Adaptive Flips */
    #quality .container,
    .strategy-ecosystem-section .container {
        width: 92%;
        max-width: 100%;
    }
    .structural-overlap-grid,
    .vertical-sync-box,
    #manufacturing .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .overlap-card, .eco-luxury-card {
        padding: 2rem !important;
    }
    .mfg-content {
        border-left: 0 !important;
        border-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    html[lang="ar"] .mfg-content {
        border-right: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        align-items: center !important;
    }
    .mfg-main-desc { max-width: 100% !important; }
    .space-y-3 { display: flex; flex-direction: column; align-items: center !important; }
    .dynamic-metrics { width: 100%; justify-content: center; }
}

/* --- TABLET CONFIGURATIONS BREAKPOINT (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    :root {
        --hero-title-size: 2.2rem;
        --hero-desc-size: 1.05rem;
        --section-title-size: 1.6rem;
        --section-desc-size: 0.9rem;
    }
    html[lang="ar"] {
        --base-font-size: 17px;
        --hero-title-size: 3rem;
        --hero-desc-size: 1.25rem;
        --section-title-size: 2rem;
        --section-desc-size: 1rem;
    }
    .stralen-hero-section {
        min-height: auto;
        padding: 80px 0 55px;
    }
    .hero-wrapper {
        width: 90%;
    }
    .hero-content {
        max-width: 100%;
    }
    .hero-tag {
        padding: 8px 15px;
        margin-bottom: 18px;
    }
    .hero-tag span {
        font-size: 8px;
        letter-spacing: 2px;
    }
    .hero-heading {
        font-size: 42px;
        line-height: 1.08;
        letter-spacing: -2px;
    }
    .hero-description {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 16px;
    }
    .btn-row {
        margin-top: 24px;
        gap: 12px;
    }
    .hero-btn {
        min-width: 170px;
        padding: 13px 22px;
    }
    .hero-btn span {
        font-size: 8px;
    }
    .btn-container {
        justify-content: center;
    }

    #quality .mb-16 { margin-bottom: 2.5rem !important; }
    .structural-badge { justify-content: center !important; width: 100%; }
    #quality .mt-16 { margin-top: 2.5rem !important; }
    #manufacturing { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
    .mfg-card-inner { padding: 2rem !important; }
}

/* --- COMPACT TABLETS & PORTRAITS (max-width: 600px) --- */
@media screen and (max-width: 600px) {
    .footer-main-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-heading {
        font-size: 1.8rem;
    }
    .ops-heading {
        font-size: 1.5rem;
    }
    .footer-social-flex, .footer-nav-links, .contact-entry {
        justify-content: center;
    }
}

/* --- MOBILE HANDSETS SCREEN BREAKPOINT (max-width: 480px) --- */
@media screen and (max-width: 480px) {
    :root {
        --base-font-size: 13px;
        --hero-title-size: 1.8rem;
        --hero-desc-size: 1rem;
        --section-title-size: 1.4rem;
        --btn-font-size: 12px;
    }
    html[lang="ar"] {
        --base-font-size: 16px;
        --hero-title-size: 2.4rem;
        --hero-desc-size: 1.1rem;
        --section-title-size: 1.7rem;
        --btn-font-size: 14px;
    }
    .stralen-hero-section {
        padding: 70px 0 45px;
    }
    .hero-wrapper {
        width: 88%;
    }
    .hero-heading {
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -1px;
    }
    .hero-description {
        font-size: 12px;
        line-height: 1.65;
        margin-top: 14px;
    }
    .btn-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hero-btn {
        width: 100%;
        min-width: 100%;
        padding: 12px 18px;
    }
    .hero-btn span {
        font-size: 7px;
        letter-spacing: 1px;
    }
    
    .btn-container {
        flex-direction: column !important;
        width: 100%;
        gap: 1rem;
        align-items: stretch;
    }
    html[lang="ar"] [dir="rtl"] .btn-container {
        flex-direction: column !important;
    }
    .btn-custom {
        width: 100%;
        max-width: 100%;
        height: 44px;
    }
    html[lang="ar"] .mfg-content {
        padding-right: 1.25rem;
    }
    #scrollToTopBtn {
        bottom: 20px;
        width: 40px;
        height: 40px;
    }
    html[dir="ltr"] #scrollToTopBtn { right: 20px; }
    html[dir="rtl"] #scrollToTopBtn { left: 20px; }

    /* Component Mobile Resets */
    #quality .container, .strategy-ecosystem-section .container, #manufacturing .container {
        width: 88%;
    }
    #quality, .strategy-ecosystem-section, #manufacturing {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
    .overlap-card, .eco-luxury-card, .strat-luxury-card {
        padding: 1.5rem !important;
    }
    .core-features-list { gap: 1rem !important; }
    .strat-main-desc { margin-bottom: 1.5rem !important; }
.quality-tag-text { 
    letter-spacing: 0.2em !important; 
}
    .matrix-3d-grid, .dynamic-metrics {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .mfg-card-inner {
        padding: 1.75rem !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 1.25rem;
        text-align: left !important;
    }
    html[lang="ar"] .mfg-card-inner {
        flex-direction: row-reverse !important;
        text-align: right !important;
    }
    .mfg-card-inner i { margin-bottom: 0 !important; font-size: 1.5rem !important; }
}

/* --- TINY DEVICES / SMARTPHONES MATRIX (max-width: 360px) --- */
@media screen and (max-width: 360px) {
    :root {
        --hero-title-size: 1.55rem;
        --hero-desc-size: 0.95rem;
        --section-title-size: 1.25rem;
    }
    html[lang="ar"] {
        --hero-title-size: 2rem;
        --hero-desc-size: 1rem;
        --section-title-size: 1.5rem;
    }
    .hero-heading {
        font-size: 26px;
        line-height: 1.15;
    }
    .hero-description {
        font-size: 11px;
        line-height: 1.6;
    }
    .hero-btn {
        padding: 11px 16px;
    }
    .hero-btn span {
        font-size: 6px;
    }
    .btn-custom {
        height: 42px;
    }
    .overlap-card, .eco-luxury-card, .strat-luxury-card, .mfg-card-inner {
        padding: 1.25rem !important;
    }
    .feature-row { gap: 0.75rem !important; }
}