/*
Theme Name: Nemer AI .si — Euro-Arab DeepTech
Theme URI: http://elnemer-ai.si/
Author: Nemer Solutions Group (EU & MENA)
Author URI: http://elnemer-ai.si/
Description: قالب ووردبريس استثنائي بتقنية .si الأوروبية باللون الأبيض والأخضر المشرق، موجه لأسواق الاتحاد الأوروبي والوطن العربي، يجمع بين الذكاء الاصطناعي المؤسسي، سيو متقدم مع 1000 مقال، أمان متشدد، ودعم كامل للغتين العربية والإنجليزية.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nemer-ai-si
Domain Path: /languages
*/

/* -------------------------------------------------------------------------
   1. Modern White & Emerald Tech Green Tokens
------------------------------------------------------------------------- */
:root {
    --si-bg-canvas: #ffffff;           /* Crisp Pure White */
    --si-bg-alt: #f8fafc;              /* Soft Slate Tint */
    --si-bg-mint: #f0fdf4;             /* Delicate Mint Tint */
    --si-bg-card: #ffffff;             /* Pure White Surface */
    --si-bg-card-hover: #ffffff;

    --si-primary: #10b981;             /* Electric Emerald Tech Green */
    --si-primary-dark: #059669;        /* Deep European Forest Green */
    --si-primary-deep: #047857;        /* Sovereign Dark Green */
    --si-accent-mint: #34d399;         /* Glowing Mint */
    --si-accent-mint-soft: #ecfdf5;    /* Soft Mint Badge Background */
    --si-gold: #f59e0b;                /* Euro Sovereign Gold */

    --si-text-head: #0f172a;           /* Deep Midnight Slate (Ultra Readable) */
    --si-text-body: #334155;           /* Refined Slate Body */
    --si-text-muted: #64748b;          /* Muted Tech Slate */

    --si-border-light: rgba(16, 185, 129, 0.18); /* Soft Emerald Border */
    --si-border-active: #10b981;
    --si-border-subtle: #e2e8f0;

    --si-font-ar: 'Cairo', system-ui, -apple-system, sans-serif;
    --si-font-en: 'Outfit', 'Inter', system-ui, sans-serif;
    --si-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --si-shadow-card: 0 10px 30px -5px rgba(5, 150, 105, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --si-shadow-hover: 0 20px 40px -10px rgba(16, 185, 129, 0.18), 0 6px 12px -3px rgba(0, 0, 0, 0.03);

    --si-radius-sm: 8px;
    --si-radius-md: 14px;
    --si-radius-lg: 20px;
    --si-radius-full: 9999px;

    --si-transition-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Reset & Typography Foundations
------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--si-bg-canvas);
    color: var(--si-text-body);
    font-family: var(--si-font-ar);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[dir="ltr"], body.nemersi-ltr {
    font-family: var(--si-font-en);
    direction: ltr;
    text-align: left;
}

html[dir="rtl"], body.nemersi-rtl {
    font-family: var(--si-font-ar);
    direction: rtl;
    text-align: right;
}

body {
    background-color: var(--si-bg-canvas);
    color: var(--si-text-body);
    line-height: 1.68;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Subtle White & Mint Tech Ambient Texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(ellipse 70% 45% at 50% -10%, rgba(16, 185, 129, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 60%, rgba(5, 150, 105, 0.05) 0%, transparent 50%),
        linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--si-text-head);
    font-weight: 800;
    line-height: 1.25;
}

a {
    color: var(--si-primary-dark);
    text-decoration: none;
    transition: var(--si-transition-smooth);
}
a:hover {
    color: var(--si-primary);
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------------------
   3. Modern White & Emerald Card Surfaces
------------------------------------------------------------------------- */
.si-glass-card {
    background: var(--si-bg-card);
    border: 1.5px solid var(--si-border-light);
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow-card);
    transition: var(--si-transition-smooth);
    position: relative;
    overflow: hidden;
}

.si-glass-card:hover {
    border-color: var(--si-primary);
    transform: translateY(-4px);
    box-shadow: var(--si-shadow-hover);
}

.si-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--si-radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: var(--si-accent-mint-soft);
    color: var(--si-primary-deep);
}

.si-pill-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--si-primary);
    box-shadow: 0 0 8px var(--si-primary);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* -------------------------------------------------------------------------
   4. Buttons & High-Contrast Controls
------------------------------------------------------------------------- */
.si-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: var(--si-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.45);
    cursor: pointer;
    transition: var(--si-transition-smooth);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.si-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(16, 185, 129, 0.6);
    color: #ffffff;
    filter: brightness(1.08);
}

.si-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: var(--si-primary-deep);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 26px;
    border-radius: var(--si-radius-md);
    border: 1.5px solid var(--si-primary);
    cursor: pointer;
    transition: var(--si-transition-smooth);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08);
}

.si-btn-secondary:hover {
    background: var(--si-accent-mint-soft);
    color: var(--si-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

/* -------------------------------------------------------------------------
   5. Site Header & Live Telemetry Bar
------------------------------------------------------------------------- */
.si-top-bar {
    background: #022c22; /* Executive Deep Forest Obsidian - Ultra High Contrast */
    color: #ffffff;
    font-size: 0.8rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(52, 211, 153, 0.25);
}
.si-top-bar a {
    color: #ffffff;
    text-decoration: none;
}
.si-top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.si-live-hubs {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.si-hub-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-weight: 600;
}
.si-hub-tag strong {
    color: #6ee7b7;
    font-weight: 700;
}
.si-hotline-badge {
    background: rgba(16, 185, 129, 0.25);
    border: 1px solid #10b981;
    color: #ffffff !important;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.8rem;
    font-family: var(--si-font-mono);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--si-transition-smooth);
}
.si-hotline-badge:hover {
    background: #10b981;
    color: #022c22 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    transition: var(--si-transition-smooth);
}

.site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(16, 185, 129, 0.25);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-symbol {
    width: 44px;
    height: 44px;
    border-radius: var(--si-radius-md);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.35rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.brand-text h1 {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--si-text-head);
    letter-spacing: -0.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.brand-tld {
    font-size: 0.85rem;
    color: #059669;
    background: var(--si-accent-mint-soft);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 1px 7px;
    border-radius: 6px;
    font-family: var(--si-font-mono);
    font-weight: 800;
}
.brand-tagline {
    font-size: 0.72rem;
    color: var(--si-text-muted);
    margin: 0;
}

.main-navigation {
    display: flex;
    align-items: center;
    gap: 22px;
}
.main-navigation a {
    color: var(--si-text-body);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 8px;
    transition: var(--si-transition-smooth);
}
.main-navigation a:hover {
    color: var(--si-primary-dark);
    background: var(--si-accent-mint-soft);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bilingual Pill Switcher */
.nemersi-lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--si-radius-full);
    border: 1.5px solid rgba(16, 185, 129, 0.3);
    background: #ffffff;
    color: var(--si-primary-deep);
    font-size: 0.82rem;
    font-weight: 700;
    transition: var(--si-transition-smooth);
}
.nemersi-lang-pill:hover {
    border-color: var(--si-primary);
    background: var(--si-accent-mint-soft);
    color: var(--si-primary-dark);
    transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   6. Hero Section — White & Emerald Cockpit
------------------------------------------------------------------------- */
.si-hero-section {
    padding: 70px 0 85px;
    position: relative;
    overflow: hidden;
}

.si-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.si-hero-content h1 {
    font-size: 2.85rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 18px 0 16px;
    letter-spacing: -0.03em;
    color: var(--si-text-head);
}
.si-gradient-text {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.si-hero-lead {
    font-size: 1.12rem;
    color: var(--si-text-body);
    line-height: 1.75;
    margin-bottom: 28px;
    max-width: 580px;
}

.si-hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 35px;
}

/* Hero White & Emerald 3D Cockpit Frame */
.si-cockpit-wrapper {
    position: relative;
}
.si-cockpit-frame {
    background: #ffffff;
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 25px 60px -15px rgba(5, 150, 105, 0.15), 0 0 35px rgba(16, 185, 129, 0.1);
    position: relative;
}

.si-cockpit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}
.si-cockpit-dots {
    display: flex;
    gap: 6px;
}
.si-cockpit-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.si-cockpit-dots span:nth-child(1) { background: #ef4444; }
.si-cockpit-dots span:nth-child(2) { background: #f59e0b; }
.si-cockpit-dots span:nth-child(3) { background: #10b981; }

.si-cockpit-status-tag {
    font-family: var(--si-font-mono);
    font-size: 0.72rem;
    color: #059669;
    background: var(--si-accent-mint-soft);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 3px 12px;
    border-radius: 12px;
    font-weight: 700;
}

.si-terminal-code {
    font-family: var(--si-font-mono);
    font-size: 0.8rem;
    line-height: 1.65;
    color: #0f172a;
    background: #f8fafc;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}
.si-terminal-code .kw { color: #059669; font-weight: 700; }
.si-terminal-code .str { color: #10b981; }
.si-terminal-code .fn { color: #0284c7; font-weight: 700; }
.si-terminal-code .num { color: #d97706; }

/* -------------------------------------------------------------------------
   7. Euro-Arab Trust & Infrastructure Bar
------------------------------------------------------------------------- */
.si-trust-bar {
    padding: 30px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.si-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    align-items: center;
}
.si-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.si-trust-icon {
    font-size: 1.6rem;
}
.si-trust-item strong {
    display: block;
    color: var(--si-text-head);
    font-size: 0.95rem;
}
.si-trust-item span {
    font-size: 0.78rem;
    color: var(--si-text-muted);
}

/* -------------------------------------------------------------------------
   8. Core Services Bento Grid
------------------------------------------------------------------------- */
.si-section-padding {
    padding: 90px 0;
    position: relative;
    z-index: 1;
}

.si-section-title {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.si-section-title h2 {
    font-size: 2.3rem;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    color: var(--si-text-head);
}
.si-section-title p {
    font-size: 1.05rem;
    color: var(--si-text-muted);
}

.si-services-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.si-service-card {
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.si-service-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.si-service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--si-text-head);
}
.si-service-card p {
    font-size: 0.88rem;
    color: var(--si-text-body);
    line-height: 1.7;
    margin-bottom: 20px;
}
.si-service-features {
    list-style: none;
    margin-bottom: 22px;
}
.si-service-features li {
    font-size: 0.82rem;
    color: #475569;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.si-service-features li span {
    color: var(--si-primary-dark);
    font-weight: 900;
}

/* -------------------------------------------------------------------------
   9. The .si Advantage / EU-Arab Standards
------------------------------------------------------------------------- */
.si-advantage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.si-adv-col {
    padding: 35px;
}
.si-adv-col h3 {
    font-size: 1.45rem;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.si-adv-list {
    list-style: none;
}
.si-adv-list li {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 14px;
}
.si-adv-list li:last-child {
    border-bottom: none;
}

/* -------------------------------------------------------------------------
   10. Multi-Currency Investment Calculator
------------------------------------------------------------------------- */
.si-calc-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px;
}
.si-currency-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}
.si-curr-btn {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    color: var(--si-text-body);
    padding: 8px 18px;
    border-radius: var(--si-radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--si-transition-smooth);
}
.si-curr-btn.active, .si-curr-btn:hover {
    background: var(--si-primary-dark);
    color: #ffffff;
    border-color: var(--si-primary-dark);
}

.si-calc-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 25px;
}
.si-calc-choice {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    padding: 16px;
    border-radius: var(--si-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--si-transition-smooth);
    user-select: none;
}
.si-calc-choice.active {
    border-color: var(--si-primary);
    background: var(--si-accent-mint-soft);
}
.si-calc-choice input {
    accent-color: var(--si-primary-dark);
    width: 18px;
    height: 18px;
}

.si-calc-result-box {
    text-align: center;
    padding: 30px;
    border-radius: var(--si-radius-md);
    background: #f0fdf4;
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    margin-top: 30px;
}
.si-calc-price-display {
    font-size: 3rem;
    font-weight: 900;
    color: var(--si-primary-deep);
    margin: 8px 0;
    font-family: var(--si-font-mono);
}

/* -------------------------------------------------------------------------
   11. 1,000 SEO Articles Hub & Knowledge Directory
------------------------------------------------------------------------- */
.si-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.si-category-box {
    background: #ffffff;
    border: 1.5px solid var(--si-border-light);
    border-radius: var(--si-radius-md);
    padding: 22px;
    transition: var(--si-transition-smooth);
    box-shadow: var(--si-shadow-card);
}
.si-category-box:hover {
    border-color: var(--si-primary);
    transform: translateY(-3px);
    box-shadow: var(--si-shadow-hover);
}
.si-category-box h4 {
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: var(--si-primary-deep);
    display: flex;
    align-items: center;
    gap: 6px;
}
.si-category-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--si-text-body);
}

/* -------------------------------------------------------------------------
   12. Global Floating Hub & Mobile Dock
------------------------------------------------------------------------- */
.si-floating-hub {
    position: fixed;
    bottom: 28px;
    z-index: 990;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
html[dir="rtl"] .si-floating-hub { left: 24px; }
html[dir="ltr"] .si-floating-hub { right: 24px; }

.si-float-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 1.4rem;
    transition: var(--si-transition-smooth);
}
.si-float-btn.whatsapp { background: #25d366; }
.si-float-btn.phone { background: #059669; }
.si-float-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.35);
}

/* Mobile Quick Dock */
.si-mobile-dock {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1.5px solid rgba(16, 185, 129, 0.2);
    z-index: 999;
    padding: 10px 14px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
}
.si-dock-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.si-dock-item {
    color: var(--si-text-body);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.si-dock-item span:first-child {
    font-size: 1.25rem;
}

/* -------------------------------------------------------------------------
   13. Exit Intent Modal
------------------------------------------------------------------------- */
.si-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.si-modal-overlay.active {
    display: flex;
}
.si-modal-card {
    background: #ffffff;
    border: 2px solid var(--si-primary);
    border-radius: var(--si-radius-lg);
    max-width: 540px;
    width: 100%;
    padding: 35px;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.si-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   14. Responsive Breakpoints
------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .si-services-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .si-hero-grid {
        grid-template-columns: 1fr;
    }
    .si-hero-content {
        text-align: center;
    }
    .si-hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .si-hero-cta-group {
        justify-content: center;
    }
    .si-advantage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .si-services-bento {
        grid-template-columns: 1fr;
    }
    .main-navigation {
        display: none;
    }
    .si-top-bar {
        display: none;
    }
    .si-hero-content h1 {
        font-size: 2.1rem;
    }
    .si-mobile-dock {
        display: block;
    }
    body {
        padding-bottom: 60px;
    }
}

/* -------------------------------------------------------------------------
   15. Animated SVG Enhancements
------------------------------------------------------------------------- */
.si-animated-svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.12));
    display: inline-block;
    vertical-align: middle;
}
.si-service-card:hover .si-animated-svg {
    transform: translateY(-6px) scale(1.06);
    filter: drop-shadow(0 12px 25px rgba(16, 185, 129, 0.25));
}