/* ==========================================================================
   Suwar Space IT — Design System
   Components: glass panels, gradients, scrollbar, reduced motion
   ========================================================================== */

body {
    font-family: 'Cairo', 'Inter', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    line-height: 1.6;
}

/* -- Typography & Line Heights ----------------- */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.35;
}


/* -- Glass Panels ------------------------------ */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(6, 182, 212, 0.2);
    box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.1);
}

.dark .glass-panel {
    background: rgba(9, 18, 28, 0.65);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(6, 182, 212, 0.15);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
}

.glass-hover {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 15px 35px -10px rgba(6, 182, 212, 0.25);
}

/* -- Mobile Menu Overlay ----------------------- */
#mobileMenu {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    background-color: #ffffff !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#mobileMenu.hidden {
    display: none !important;
}

.mobile-menu-scroll {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
}

.dark #mobileMenu {
    background-color: #05090e !important;
}




/* -- Gradient Text ----------------------------- */
.turquoise-gradient-text {
    color: #0f766e; /* high-contrast solid teal-700 / turquoise-800 in light mode */
    background: none;
    -webkit-text-fill-color: initial;
}

.dark .turquoise-gradient-text {
    background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 40%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-gradient-text {
    background: linear-gradient(135deg, #fef08a 0%, #d4af37 50%, #b89628 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -- Scrollbar -------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
.dark ::-webkit-scrollbar-track { background: #080d1a; }
::-webkit-scrollbar-thumb { background: #0891b2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #047857; }

/* -- Focus visibility ------------------------- */
:focus-visible {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

/* -- Geometric Grid & Flow Animations ---------- */
@keyframes dataFlow {
    0% { stroke-dashoffset: 60; }
    100% { stroke-dashoffset: 0; }
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(6px); opacity: 1; }
}

@keyframes gridFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

/* Subtle dot/grid pattern — brand-neutral */
.grid-pattern,
.ai-grid-pattern {
    background-size: 48px 48px;
    background-image:
        linear-gradient(to right, rgba(6, 182, 212, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(6, 182, 212, 0.035) 1px, transparent 1px);
}

.dark .grid-pattern,
.dark .ai-grid-pattern {
    background-size: 48px 48px;
    background-image:
        linear-gradient(to right, rgba(6, 182, 212, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(6, 182, 212, 0.055) 1px, transparent 1px);
}

.ai-flow-path {
    stroke-dasharray: 8 12;
    animation: dataFlow 2.5s linear infinite;
}

.ai-arrow-track {
    animation: arrowPulse 2s ease-in-out infinite;
}

/* -- Admin & Portal Responsive Sidebar --------- */
@media (max-width: 1023px) {
    #adminSidebar {
        transform: translateX(100%);
    }
    [dir="ltr"] #adminSidebar {
        transform: translateX(-100%);
    }
    #adminSidebar.sidebar-open {
        transform: translateX(0) !important;
    }
}
@media (min-width: 1024px) {
    #adminSidebar {
        transform: translateX(0) !important;
    }
}

/* -- Client portal dashboard -------------------- */
.portal-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.1);
}

.dark .portal-card {
    background: rgba(9, 18, 28, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(6, 182, 212, 0.15);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.portal-sidebar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dark .portal-sidebar {
    background: rgba(9, 18, 28, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.9rem;
    color: #334155;
    transition: all 0.25s ease;
}

.dark .portal-nav-link {
    color: #cbd5e1;
}

.portal-nav-link:hover {
    background: rgba(6, 182, 212, 0.08);
    color: #0e7490;
}

.dark .portal-nav-link:hover {
    background: rgba(6, 182, 212, 0.12);
    color: #22d3ee;
}

.portal-nav-link.active {
    background: linear-gradient(135deg, #0891b2 0%, #047857 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px -6px rgba(8, 145, 178, 0.45);
}

.portal-nav-link i {
    width: 1.25rem;
    text-align: center;
    font-size: 0.9em;
}

.portal-dropdown {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dark .portal-dropdown {
    background: rgba(9, 18, 28, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* -- Partners marquee (home carousel) ----------- */
@keyframes partnersScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.partners-marquee {
    padding: 0.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: max-content;
}

.partners-track.is-loaded {
    animation: partnersScroll 34s linear infinite;
}

.partners-track.is-loaded:hover {
    animation-play-state: paused;
}

.partners-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(6, 182, 212, 0.18);
    box-shadow: 0 10px 30px -12px rgba(6, 182, 212, 0.15);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.dark .partners-item {
    background: rgba(9, 18, 28, 0.65);
    border-color: rgba(6, 182, 212, 0.15);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.5);
}

.partners-item:hover {
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: 0 16px 38px -12px rgba(6, 182, 212, 0.3);
}

.partners-item img {
    max-height: 3.5rem;
    max-width: 11rem;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter 0.3s ease;
}

.partners-item:hover img {
    filter: grayscale(0%);
}

.partners-item-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0e7490;
    white-space: nowrap;
}

.dark .partners-item-text {
    color: #22d3ee;
}

@media (prefers-reduced-motion: reduce) {
    .partners-track.is-loaded {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* -- Reduced motion --------------------------- */
@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;
    }
}

/* ==========================================================================
   CREATIVE WORLD-CLASS DESIGN SYSTEM v2
   Inspired by Stripe · Vercel · Linear · Apple · Framer
   ========================================================================== */

/* -- Adaptive Mesh Gradient Backgrounds ---------------------------------- */
.mesh-bg-light,
.mesh-bg-adaptive {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 15% 15%, rgba(6,182,212,0.09) 0px, transparent 55%),
        radial-gradient(at 85% 10%, rgba(4,120,87,0.07)  0px, transparent 55%),
        radial-gradient(at 50% 90%, rgba(6,182,212,0.05) 0px, transparent 55%);
}
.dark .mesh-bg-light,
.dark .mesh-bg-adaptive {
    background-color: #05090e;
    background-image:
        radial-gradient(at 15% 20%, rgba(6,182,212,0.14) 0px, transparent 60%),
        radial-gradient(at 85% 15%, rgba(4,120,87,0.10)  0px, transparent 60%),
        radial-gradient(at 50% 85%, rgba(14,116,144,0.08)0px, transparent 60%);
}
.mesh-bg-dark {
    background-color: #05090e;
    background-image:
        radial-gradient(at 15% 25%, rgba(6,182,212,0.16) 0px, transparent 60%),
        radial-gradient(at 85% 15%, rgba(4,120,87,0.12)  0px, transparent 60%),
        radial-gradient(at 60% 85%, rgba(14,116,144,0.10)0px, transparent 60%);
}

/* -- Terminal / Code Component (Dark in both modes for authenticity) ----- */
.sw-terminal {
    background: #090e17;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1.25rem;
    overflow: hidden;
    font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.4);
}
.sw-terminal-header {
    background: #111927;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sw-terminal-dot { width:0.65rem; height:0.65rem; border-radius:50%; }
.sw-terminal-body {
    padding: 1.5rem;
    font-size: 0.78rem;
    line-height: 1.8;
    color: #94a3b8;
}
.sw-terminal-body .t-green  { color: #34d399; }
.sw-terminal-body .t-blue   { color: #38bdf8; }
.sw-terminal-body .t-purple { color: #c084fc; }
.sw-terminal-body .t-yellow { color: #fbbf24; }
.sw-terminal-body .t-red    { color: #f87171; }
.sw-terminal-body .t-dim    { color: #64748b; }
.sw-terminal-body .t-white  { color: #f8fafc; font-weight: 600; }
.sw-cursor {
    display: inline-block; width:0.5rem; height:1em;
    background:#34d399; animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity:0; } }

/* -- Timeline ------------------------------------------------------------- */
.sw-timeline { position: relative; }
.sw-timeline::before {
    content:'';
    position:absolute;
    inset-inline-start: 1.3rem;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(6,182,212,0.4) 10%, rgba(4,120,87,0.4) 90%, transparent);
}
.sw-timeline-item {
    position: relative;
    padding-inline-start: 3.75rem;
    padding-bottom: 2.75rem;
}
.sw-timeline-item:last-child { padding-bottom: 0; }
.sw-timeline-dot {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2, #047857);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.8rem;
    box-shadow: 0 0 0 4px rgba(6,182,212,0.15), 0 4px 12px rgba(6,182,212,0.25);
    z-index: 1;
}

/* -- Manifesto Text (Stripe-inspired) ------------------------------------ */
.sw-manifesto-item {
    padding: 2.5rem 0;
    border-top: 1px solid rgba(15,23,42,0.08);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 3rem;
    align-items: start;
    cursor: default;
    transition: all 0.3s ease;
}
.dark .sw-manifesto-item { border-top-color: rgba(255,255,255,0.08); }
.sw-manifesto-item:hover { padding-inline-start: 0.75rem; }
.sw-manifesto-num {
    font-size: clamp(3.5rem,7vw,6.5rem);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(6,182,212,0.4);
    transition: -webkit-text-stroke-color 0.4s;
    user-select: none;
}
.dark .sw-manifesto-num {
    -webkit-text-stroke: 1.5px rgba(6,182,212,0.3);
}
.sw-manifesto-item:hover .sw-manifesto-num {
    -webkit-text-stroke-color: rgba(6,182,212,0.85);
}
@media (max-width: 640px) {
    .sw-manifesto-item { grid-template-columns: 1fr; gap: 0.5rem; }
    .sw-manifesto-num  { font-size: 3rem; }
}

/* -- Feature Billboard ---------------------------------------------------- */
.sw-billboard {
    position: relative; border-radius: 2rem;
    overflow: hidden; min-height: 420px;
    display: flex; align-items: flex-end;
}
.sw-billboard-content { position: relative; z-index: 10; padding: 2.5rem; width: 100%; }

/* -- Stat cards ----------------------------------------------------------- */
.sw-stat-card {
    padding: 2rem; border-radius: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sw-stat-card:hover { transform: translateY(-5px); }
.sw-stat-value {
    font-size: clamp(2.25rem,5vw,4rem);
    font-weight: 900; line-height: 1;
    letter-spacing: -0.04em;
}

/* -- Infinite Marquee (Continuous Seamless Loop) -------------------------- */
.sw-marquee-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.sw-marquee-track {
    display: flex;
    width: max-content;
    gap: 1rem;
}

.sw-marquee-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    animation: sw-marquee-scroll 32s linear infinite;
    will-change: transform;
}

[dir="rtl"] .sw-marquee-group,
html[dir="rtl"] .sw-marquee-group,
body[dir="rtl"] .sw-marquee-group {
    animation: sw-marquee-scroll-rtl 32s linear infinite;
}

@keyframes sw-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes sw-marquee-scroll-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.sw-marquee-wrap:hover .sw-marquee-group {
    animation-play-state: paused;
}


/* -- Pill tags ------------------------------------------------------------ */
.sw-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 1rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sw-pill-teal {
    background: rgba(6,182,212,0.10);
    border: 1px solid rgba(6,182,212,0.30);
    color: #0891b2;
}
.dark .sw-pill-teal {
    background: rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.35);
    color: #22d3ee;
}
.sw-pill-white {
    background: rgba(15,23,42,0.06);
    border: 1px solid rgba(15,23,42,0.12);
    color: #334155;
}
.dark .sw-pill-white {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    color: #cbd5e1;
}

/* -- Universal Brand Buttons (Primary & Secondary) ------------------------ */
.sw-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 0.875rem 2rem; border-radius: 0.875rem;
    background: linear-gradient(135deg, #0891b2 0%, #047857 100%);
    color: #ffffff !important; font-size: 0.875rem; font-weight: 800;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 14px -2px rgba(8,145,178,0.45);
    text-decoration: none; cursor: pointer; border: none;
}
.sw-btn-primary:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #065f46 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -2px rgba(8,145,178,0.55);
}

.sw-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 0.875rem 2rem; border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid #cbd5e1;
    color: #1e293b; font-size: 0.875rem; font-weight: 700;
    transition: all 0.25s ease; text-decoration: none; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dark .sw-btn-ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #f1f5f9;
    box-shadow: none;
}
.sw-btn-ghost:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}
.dark .sw-btn-ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.25);
    color: #ffffff;
}

/* -- Section spacing ------------------------------------------------------ */
.sw-section    { padding: 5.5rem 1.5rem; }
.sw-section-lg { padding: 7.5rem 1.5rem; }
@media (max-width: 768px) {
    .sw-section    { padding: 4rem 1.25rem; }
    .sw-section-lg { padding: 4.5rem 1.25rem; }
}

/* -- Gradient rule -------------------------------------------------------- */
.sw-rule {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(6,182,212,0.3), transparent);
    border: none; margin: 0;
}

/* -- Card variants -------------------------------------------------------- */
.sw-card-dark {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.dark .sw-card-dark {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}
.sw-card-dark:hover {
    border-color: rgba(6,182,212,0.4);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -10px rgba(6,182,212,0.15);
}
.dark .sw-card-dark:hover {
    background: rgba(6,182,212,0.04);
}

.sw-card-light {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dark .sw-card-light {
    background: #0b1422;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.sw-card-light:hover {
    transform: translateY(-4px);
    border-color: rgba(6,182,212,0.4);
    box-shadow: 0 16px 36px -10px rgba(6,182,212,0.15);
}
.dark .sw-card-light:hover {
    border-color: rgba(6,182,212,0.35);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7);
}

/* -- Honor reveal --------------------------------------------------------- */
.honor-reveal, .honor-reveal-left, .honor-reveal-right, .honor-reveal-scale {
    opacity: 0;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.honor-reveal { transform: translateY(32px); }
.honor-reveal-left { transform: translateX(-32px); }
.honor-reveal-right { transform: translateX(32px); }
.honor-reveal-scale { transform: scale(0.94) translateY(24px); }
.honor-reveal.is-visible, .honor-reveal-left.is-visible, .honor-reveal-right.is-visible, .honor-reveal-scale.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
.honor-reveal:nth-child(2), .honor-reveal-left:nth-child(2), .honor-reveal-right:nth-child(2), .honor-reveal-scale:nth-child(2) { transition-delay: .08s; }
.honor-reveal:nth-child(3), .honor-reveal-left:nth-child(3), .honor-reveal-right:nth-child(3), .honor-reveal-scale:nth-child(3) { transition-delay: .16s; }
.honor-reveal:nth-child(4), .honor-reveal-left:nth-child(4), .honor-reveal-right:nth-child(4), .honor-reveal-scale:nth-child(4) { transition-delay: .24s; }
.honor-reveal:nth-child(5), .honor-reveal-left:nth-child(5), .honor-reveal-right:nth-child(5), .honor-reveal-scale:nth-child(5) { transition-delay: .32s; }
.honor-reveal:nth-child(6), .honor-reveal-left:nth-child(6), .honor-reveal-right:nth-child(6), .honor-reveal-scale:nth-child(6) { transition-delay: .40s; }

/* -- Page hero (full-viewport landing) ------------------------------------ */
.sw-page-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(100vh, 920px);
    padding: 5.5rem 1.5rem 4.5rem;
    overflow: hidden;
}
.sw-page-hero--compact {
    min-height: auto;
    padding: 7rem 1.5rem 4rem;
}
@media (max-width: 768px) {
    .sw-page-hero { padding: 4.5rem 1.25rem 3.5rem; min-height: auto; }
    .sw-page-hero--compact { padding: 5rem 1.25rem 3rem; }
}

/* -- Glow orbs & floating accents ----------------------------------------- */
.sw-glow-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}
.sw-glow-orb--teal   { background: rgba(6,182,212,0.18); }
.sw-glow-orb--green  { background: rgba(4,120,87,0.14); }
.sw-glow-orb--amber  { background: rgba(245,158,11,0.12); }

@keyframes sw-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-12px) scale(1.02); }
}
.sw-float { animation: sw-float 6s ease-in-out infinite; }
.sw-float-delay { animation-delay: 1.5s; }

/* -- Bento grid helper ---------------------------------------------------- */
.sw-bento {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .sw-bento { grid-template-columns: repeat(3, 1fr); }
    .sw-bento-span-2 { grid-column: span 2; }
    .sw-bento-row-2  { grid-row: span 2; }
}

/* 4-across variant (overrides .sw-bento once defined above) */
.sw-bento--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .sw-bento--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .sw-bento--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -- Partner / logo card -------------------------------------------------- */
.sw-logo-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 1.25rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    height: 100%;
    text-align: center;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s, box-shadow 0.35s;
}
.dark .sw-logo-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.07);
}
.sw-logo-card:hover {
    transform: translateY(-6px);
    border-color: rgba(6,182,212,0.35);
    box-shadow: 0 20px 50px -15px rgba(6,182,212,0.2);
}
.sw-logo-card img {
    max-height: 3.5rem;
    max-width: 10rem;
    object-fit: contain;
    filter: grayscale(40%);
    opacity: 0.75;
    transition: filter 0.35s, opacity 0.35s, transform 0.35s;
}
.sw-logo-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* -- Compliance badge strip ----------------------------------------------- */
.sw-badge-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.sw-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    white-space: nowrap;
}
.sw-badge--light {
    background: rgba(6,182,212,0.06);
    border-color: rgba(6,182,212,0.2);
    color: #0891b2;
}
.dark .sw-badge--light {
    background: rgba(6,182,212,0.1);
    border-color: rgba(6,182,212,0.22);
    color: #22d3ee;
}

/* -- Product hero accent bar ---------------------------------------------- */
.sw-product-hero {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.sw-product-hero::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #06b6d4, #047857);
}

/* -- Brand Logo Dark Mode Pure White Filter ---------------------------- */
.dark .brand-logo-img,
.dark .theme-logo,
.dark .site-logo-white {
    filter: brightness(0) invert(1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Select2 & Flatpickr — Tailwind identity-matched (مطابق للوحة الادمن)
   Border: slate-200 / white/10 dark | Radius: 0.85rem | Font: Cairo 0.8125rem
   Height: 42px | Focus: turquoise ring | Dropdown: glass shadow-xl
   ══════════════════════════════════════════════════════════════════════════ */
.select2-container { font-family: 'Cairo', 'Inter', sans-serif; }
.select2-container .select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;
    display: flex;
    align-items: center;
    border-radius: 0.85rem !important;
}
.select2-container--default .select2-selection--single {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.85rem !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dark .select2-container--default .select2-selection--single {
    background: #0f1a2b !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    color: #0f172a !important;
    padding-inline-start: 0.95rem !important;
    padding-inline-end: 2.4rem !important;
    letter-spacing: 0.01em;
}
.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #f1f5f9 !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important; font-weight: 500 !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #64748b !important; }

/* Arrow — turquoise chevron */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important; width: 2.2rem !important;
    inset-inline-end: 0.15rem !important;
    display:flex; align-items:center; justify-content:center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important; margin: 0 !important;
    width: 0.45rem; height: 0.45rem;
    border-inline-end: 1.7px solid #64748b;
    border-bottom: 1.7px solid #64748b;
    transform: rotate(45deg);
    position: static !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #94a3b8; }
.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(-135deg) translate(-1px, -1px); }

/* Focus / open */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #0891b2 !important;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.15) !important;
}
.dark .select2-container--default.select2-container--open .select2-selection--single,
.dark .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.18) !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #94a3b8; font-weight: 700; margin-inline-end: 1.6rem;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: #e11d48; }

/* Dropdown panel */
.select2-container .select2-dropdown {
    border: 1px solid rgba(8,145,178,0.18) !important;
    border-radius: 0.9rem !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,0.12), 0 4px 12px rgba(8,145,178,0.08) !important;
    overflow: hidden !important;
    z-index: 1050 !important;
    padding: 0.35rem;
}
.dark .select2-container .select2-dropdown {
    background: #0f1a2b !important;
    border-color: rgba(34,211,238,0.18) !important;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.5) !important;
}
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; scrollbar-width: thin; }
.select2-results__option {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    padding: 0.6rem 0.85rem !important;
    border-radius: 0.6rem !important;
    margin: 0.15rem 0 !important;
    color: #334155 !important;
    transition: background 0.15s, color 0.15s;
}
.dark .select2-results__option { color: #cbd5e1 !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, #0891b2 0%, #047857 100%) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__option--selected {
    background: rgba(8,145,178,0.08) !important;
    color: #0891b2 !important;
    font-weight: 700 !important;
}
.dark .select2-container--default .select2-results__option--selected {
    background: rgba(34,211,238,0.12) !important;
    color: #22d3ee !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background: linear-gradient(135deg, #0891b2 0%, #047857 100%) !important;
    color: #fff !important;
}

/* Search field inside dropdown */
.select2-container--default .select2-search--dropdown { padding: 0.4rem 0.35rem 0.5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.65rem !important;
    padding: 0.55rem 0.8rem !important;
    font-size: 0.8125rem !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    background: #f8fafc !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #091121 !important; border-color: rgba(255,255,255,0.08) !important; color: #f1f5f9 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none !important; border-color: #0891b2 !important; background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.12) !important;
}
.dark .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background: #0f1a2b !important; box-shadow: 0 0 0 3px rgba(34,211,238,0.15) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: #94a3b8; }

/* Multiple (tags) */
.select2-container--default .select2-selection--multiple {
    background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 0.85rem !important;
    min-height: 42px !important; padding: 0.28rem 0.45rem !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dark .select2-container--default .select2-selection--multiple { background: #0f1a2b !important; border-color: rgba(255,255,255,0.08) !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #0891b2 !important; box-shadow: 0 0 0 3px rgba(8,145,178,0.12) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, rgba(8,145,178,0.12), rgba(4,120,87,0.10)) !important;
    border: 1px solid rgba(8,145,178,0.22) !important;
    color: #0e7490 !important; border-radius: 9999px !important;
    font-size: 0.72rem !important; font-weight: 700 !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    padding: 0.2rem 0.65rem !important; margin: 0.2rem 0.25rem 0.2rem 0 !important;
}
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice { color: #22d3ee !important; border-color: rgba(34,211,238,0.25) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #0891b2 !important; margin-inline-end: 0.35rem !important; font-weight: 700 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #be123c !important; background: transparent !important; }

/* Flatpickr — Tailwind-matched */
.flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid rgba(8,145,178,0.16) !important;
    border-radius: 1rem !important;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,0.12), 0 4px 12px rgba(8,145,178,0.08) !important;
    font-family: 'Cairo', 'Inter', sans-serif !important;
    overflow: hidden;
}
.dark .flatpickr-calendar {
    background: #0f1a2b !important;
    border-color: rgba(34,211,238,0.16) !important;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.45) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #0891b2 0%, #047857 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Flatpickr input affordance */
input.flatpickr-input, input[data-flatpickr], input[data-calendar], input.date-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.7'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.9rem center;
    background-size: 1rem;
    padding-inline-end: 2.5rem !important;
}
[dir="rtl"] input.flatpickr-input, [dir="rtl"] input[data-flatpickr], [dir="rtl"] input[data-calendar], [dir="rtl"] input.date-input {
    background-position: right 0.9rem center;
    padding-inline-start: 2.5rem !important;
    padding-inline-end: 0.95rem !important;
}
.dark input.flatpickr-input { color-scheme: dark; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { border-radius: 0.6rem; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: rgba(6,182,212,.1); }
.dark .flatpickr-day { color: #cbd5e1; }
.dark .flatpickr-day:hover { background: rgba(6,182,212,.15); }
.dark .flatpickr-day.today { border-color: rgba(6,182,212,.4); }
.dark .flatpickr-weekday { color: #94a3b8; }
.dark .flatpickr-months .flatpickr-month { color: #f8fafc; fill: #f8fafc; }
.dark .flatpickr-current-month input.cur-year { color: #f8fafc; }

/* -- Smooth Anchor Jump & Sticky Header Offset ------------------------ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

[id] {
    scroll-margin-top: 5.5rem;
}

/* Ensure any directly targeted hash anchor is always 100% visible and unclipped */
:target,
:target *,
.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* -- Honor Reveal Scroll Transitions ---------------------------------- */
.honor-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.honor-reveal.is-visible,
:target .honor-reveal,
.honor-reveal:has(:target) {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.honor-reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.honor-reveal-scale.is-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.honor-reveal-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.honor-reveal-right.is-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.honor-reveal-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.honor-reveal-left.is-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* -- Crafted Architectural & Human Micro-UI Tokens -------------------- */
.editorial-num {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    opacity: 0.75;
}

.tech-border-glow {
    position: relative;
}
.tech-border-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.45), transparent);
    pointer-events: none;
}
.dark .tech-border-glow::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.4), transparent);
}

.bento-card-spotlight {
    position: relative;
    overflow: hidden;
}
.bento-card-spotlight::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.bento-card-spotlight:hover::after {
    opacity: 1;
}

.tech-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   World-Class Reading Experience: TOC, Code Blocks, Font Scaling & Print
   ========================================================================== */

/* -- Font Zoom Scale Classes ---------------------------------------------- */
.font-scale-sm { font-size: 0.925rem !important; }
.font-scale-base { font-size: 1.05rem !important; }
.font-scale-lg { font-size: 1.185rem !important; line-height: 2.15 !important; }

/* -- Sticky Table of Contents (TOC) --------------------------------------- */
.toc-link {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 0.65rem;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
    border-inline-start: 2px solid transparent;
}
.dark .toc-link {
    color: #94a3b8;
}
.toc-link:hover {
    color: #0891b2;
    background: rgba(8, 145, 178, 0.06);
    border-inline-start-color: #06b6d4;
    padding-inline-start: 1rem;
}
.dark .toc-link:hover {
    color: #22d3ee;
    background: rgba(34, 211, 238, 0.08);
}
.toc-link.active {
    color: #0891b2 !important;
    font-weight: 800 !important;
    background: rgba(8, 145, 178, 0.1) !important;
    border-inline-start-color: #0891b2 !important;
    padding-inline-start: 1rem !important;
}
.dark .toc-link.active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border-inline-start-color: #38bdf8 !important;
}

/* Sub-headings in TOC (h3) */
.toc-link.toc-sub {
    padding-inline-start: 1.35rem;
    font-size: 0.75rem;
}
.toc-link.toc-sub:hover,
.toc-link.toc-sub.active {
    padding-inline-start: 1.6rem !important;
}

/* -- Code Blocks Enhancements with Copy Button ---------------------------- */
.code-block-wrapper {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    color: #94a3b8;
}
.code-block-dots {
    display: flex;
    gap: 0.35rem;
}
.code-block-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}
.code-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
}
.code-copy-btn:hover {
    background: rgba(8, 145, 178, 0.25);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.35);
}

/* -- Callout Alerts in Markdown Content ----------------------------------- */
.callout-note, .callout-tip, .callout-warning {
    position: relative;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 1rem;
    border-inline-start-width: 4px;
    font-size: 0.925rem;
    line-height: 1.8;
}
.callout-note {
    background: rgba(8, 145, 178, 0.06);
    border-color: #0891b2;
    color: #0e7490;
}
.dark .callout-note {
    background: rgba(34, 211, 238, 0.08);
    border-color: #22d3ee;
    color: #a5f3fc;
}
.callout-tip {
    background: rgba(16, 185, 129, 0.06);
    border-color: #10b981;
    color: #047857;
}
.dark .callout-tip {
    background: rgba(16, 185, 129, 0.08);
    border-color: #34d399;
    color: #a7f3d0;
}
.callout-warning {
    background: rgba(245, 158, 11, 0.06);
    border-color: #f59e0b;
    color: #b45309;
}
.dark .callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: #fbbf24;
    color: #fde68a;
}

/* -- Deep Linking Anchor on Headings --------------------------------------- */
.heading-anchor {
    opacity: 0;
    margin-inline-start: 0.5rem;
    color: #0891b2;
    text-decoration: none;
    font-size: 0.85em;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
h2:hover .heading-anchor,
h3:hover .heading-anchor {
    opacity: 1;
}

/* -- Print Stylesheet (Executive Whitepaper Format) ----------------------- */
@media print {
    header, footer, #readingProgressContainer, aside, #mobileMenu,
    #particleCanvas, #aiChatBox, #feedbackBox, .sw-btn-ghost,
    .no-print, nav[aria-label="breadcrumbs"], form[role="search"],
    button, .code-copy-btn, #toast, #copyToast {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 11pt !important;
        line-height: 1.7 !important;
    }
    .prose {
        max-width: 100% !important;
        color: #0f172a !important;
    }
    a {
        text-decoration: underline !important;
        color: #0284c7 !important;
    }
    .print-header-brand {
        display: block !important;
        border-bottom: 2px solid #0891b2 !important;
        padding-bottom: 1rem !important;
        margin-bottom: 2rem !important;
    }
    pre, blockquote {
        page-break-inside: avoid;
    }
}


/* ==========================================================================
   HEADER ENHANCEMENTS — Top Bar + Announcement Bar + Scroll Shrink
   ========================================================================== */

/* -- Announcement Bar ------------------------------------------------------ */
.header-announcement-bar {
    position: relative;
    z-index: 51;
    /* sticky within the header group */
}
.header-announcement-bar + * {
    /* shift the sticky top bar down when announcement is visible */
}

/* -- Top Utility Bar (dark strip) ----------------------------------------- */
.header-top-bar {
    background: #090e1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.6875rem; /* 11px */
    font-weight: 600;
    color: #94a3b8;
}
.header-top-bar a:hover,
.header-top-bar button:hover {
    color: #22d3ee;
}

/* -- Main Nav Header scroll-shrink effect ---------------------------------- */
#mainHeader {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}
#mainHeader.scrolled {
    box-shadow: 0 4px 24px -4px rgba(6, 182, 212, 0.12), 0 1px 6px rgba(0,0,0,0.08);
}
.dark #mainHeader.scrolled {
    box-shadow: 0 4px 32px -4px rgba(0,0,0,0.5), 0 1px 6px rgba(6,182,212,0.1);
}

/* -- Nav link active indicator --------------------------------------------- */
nav a[aria-current="page"],
nav a.active-nav-link {
    color: #0891b2;
    position: relative;
}
.dark nav a[aria-current="page"],
.dark nav a.active-nav-link {
    color: #22d3ee;
}
nav a[aria-current="page"]::after,
nav a.active-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0; right: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #0891b2, #047857);
}

/* -- Mega menu refined shadow --------------------------------------------- */
.mega-menu-panel {
    background: #ffffff;
    border-radius: 1.25rem;
    border: 1px solid rgba(6, 182, 212, 0.18);
    box-shadow: 0 20px 60px -12px rgba(15, 23, 42, 0.18),
                0 4px 16px rgba(6, 182, 212, 0.08);
}
.dark .mega-menu-panel {
    background: #060c16;
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow: 0 25px 70px -12px rgba(0, 0, 0, 0.95),
                0 4px 20px rgba(6, 182, 212, 0.06);
}

/* -- Mobile menu improved ------------------------------------------------- */
#mobileMenu .mobile-section-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.6);
    backdrop-filter: blur(8px);
}
.dark #mobileMenu .mobile-section-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(13, 27, 42, 0.5);
}

/* ==========================================================================
   FOOTER — Link utilities & contact strip
   ========================================================================== */

/* Standard footer link */
.footer-link {
    display: inline-block;
    color: #94a3b8; /* slate-400 */
    transition: color 0.2s ease, padding-inline-start 0.2s ease;
    line-height: 1.6;
}
.footer-link:hover {
    color: #22d3ee; /* turquoise-400 */
    padding-inline-start: 2px;
}

/* Accent "View all →" footer link */
.footer-link-accent {
    display: inline-block;
    color: #0891b2; /* turquoise-600 */
    font-weight: 700;
    font-size: 0.7rem;
    transition: color 0.2s ease, gap 0.2s ease;
}
.dark .footer-link-accent {
    color: #22d3ee;
}
.footer-link-accent:hover {
    color: #06b6d4;
    text-decoration: underline;
}

/* Footer section heading divider line */
footer h4 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0.125rem;
}

/* ==========================================================================
   BRAND HERO STRIP — Logo showcase component used in about/identity/values/compliance
   ========================================================================== */

.brand-hero-strip {
    /* Centered flex column, spacing handled by gap-4 in the component */
}

/* Logo card container */
.brand-hero-strip .relative.group > div {
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.brand-hero-strip .relative.group:hover > div {
    transform: translateY(-2px);
}

/* Logo dual-panel (identity page) */
.logo-anatomy-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px -12px rgba(0,0,0,0.25);
}

/* Trust strip (about hero) */
.hero-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}
.hero-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(6,182,212,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.hero-trust-chip:hover {
    border-color: rgba(6,182,212,0.4);
    transform: translateY(-1px);
}
.dark .hero-trust-chip {
    background: rgba(9,18,28,0.6);
    border-color: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
.dark .hero-trust-chip:hover {
    border-color: rgba(34,211,238,0.35);
}

/* sw-page-hero extra breathing room when logo strip is present */
.sw-page-hero:has(.brand-hero-strip) {
    padding-block: 5rem 4rem;
}
@media (max-width: 640px) {
    .sw-page-hero:has(.brand-hero-strip) {
        padding-block: 4rem 3rem;
    }
}