/* Core Global UI Theme Token Parameters */
:root {
    --sty-bg-dark: #060913;
    --sty-text-primary: #f8fafc;
    --sty-text-secondary: #94a3b8;
    --sty-accent: #00ffcc;
    --sty-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Header Architectural Styling Matrix */
.sty-header-root {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background: rgba(6, 9, 19, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-family: var(--sty-font); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sty-header-compact { background: rgba(3, 5, 11, 0.95); box-shadow: 0 16px 40px rgba(0,0,0,0.4); padding: 4px 0; }
.sty-header-container { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; }
.sty-logo { font-weight: 800; font-size: 20px; color: var(--sty-text-primary); letter-spacing: -0.5px; text-decoration: none; }
.sty-logo span { color: var(--sty-accent); text-shadow: 0 0 12px rgba(0,255,204,0.25); }
.sty-nav-list { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.sty-nav-list a { color: var(--sty-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease; }
.sty-nav-list a:hover { color: var(--sty-text-primary); }
.sty-header-actions { display: flex; align-items: center; gap: 24px; }
.sty-status-pill { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--sty-accent); background: rgba(0,255,204,0.06); padding: 5px 12px; border-radius: 30px; border: 1px solid rgba(0,255,204,0.15); }
.sty-status-dot { width: 6px; height: 6px; background: var(--sty-accent); border-radius: 50%; box-shadow: 0 0 8px var(--sty-accent); }
.sty-btn-primary { background: var(--sty-text-primary); color: var(--sty-bg-dark); padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; }
.sty-btn-primary:hover { opacity: 0.9; }

/* Canvas Graphics Matrix Configuration */
.sty-canvas-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: radial-gradient(circle at 50% 0%, #0d1527 0%, var(--sty-bg-dark) 75%); pointer-events: none; }

/* Enterprise Structural Footer Layout Matrix */
.sty-footer-root { background: #03050a; border-top: 1px solid rgba(255,255,255,0.04); padding: 96px 32px 48px 32px; font-family: var(--sty-font); color: var(--sty-text-secondary); }
.sty-footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2.5fr repeat(2, 1fr); gap: 64px; }
.sty-brand-summary { display: flex; flex-direction: column; gap: 20px; }
.sty-logo-footer { font-weight: 800; font-size: 20px; color: #fff; }
.sty-logo-footer span { color: var(--sty-accent); }
.sty-brand-text { font-size: 14px; line-height: 1.6; max-width: 320px; color: var(--sty-text-secondary); margin: 0; }
.sty-footer-title { color: var(--sty-text-primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 24px 0; }
.sty-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sty-footer-links a { color: var(--sty-text-secondary); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.sty-footer-links a:hover { color: var(--sty-accent); }
.sty-footer-bottom { max-width: 1280px; margin: 80px auto 0 auto; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.sty-footer-legal-nav { display: flex; gap: 32px; }
.sty-footer-legal-nav a { color: #475569; text-decoration: none; transition: color 0.2s ease; }
.sty-footer-legal-nav a:hover { color: var(--sty-text-primary); }

/* Responsive Grid Adaptation Layer */
@media(max-width: 960px) {
    .sty-footer-grid { grid-template-columns: 1fr; gap: 48px; }
    .sty-footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
    .sty-nav-list { display: none; } /* Integrate collapsible hamburger overlay logic if required globally */
}