/* ==========================================================================
   Tabler v1.6 Inspired Design System for Performance Platform
   ========================================================================== */

:root {
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --tblr-body-bg: #f8fafc;
    --tblr-body-color: #1e293b;
    --tblr-muted: #64748b;
    --tblr-border-color: #e2e8f0;
    --tblr-border-radius: 6px;
    --tblr-border-radius-sm: 4px;
    --tblr-border-radius-lg: 8px;
    
    /* Brand & Accent Colors */
    --tblr-primary: #0054a6;
    --tblr-primary-rgb: 0, 84, 166;
    --tblr-primary-hover: #00468c;
    --tblr-success: #2fb344;
    --tblr-warning: #f59f00;
    --tblr-danger: #d63939;
    --tblr-info: #0ca678;
    --tblr-secondary: #64748b;
    --tblr-azure: #4299e1;
    --tblr-purple: #ae3ec9;

    /* Shadows */
    --tblr-box-shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.05);
    --tblr-box-shadow-hover: 0 4px 12px 0 rgba(15, 23, 42, 0.08);
}

/* Base HTML & Typography */
html, body {
    font-family: var(--tblr-font-sans-serif);
    background-color: var(--tblr-body-bg);
    color: var(--tblr-body-color);
    font-size: 0.875rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--tblr-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--tblr-primary-hover);
}

/* Page Header Hierarchy */
.page-header {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-pretitle {
    font-size: 0.725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tblr-muted);
    margin-bottom: 0.25rem;
}

.page-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tblr-body-color);
    line-height: 1.25;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--tblr-muted);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.btn-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Tabler Card System */
.card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: #ffffff;
    box-shadow: var(--tblr-box-shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.card.pricing-plan-card,
.pricing-plan-card,
.card.overflow-visible,
.overflow-visible {
    overflow: visible !important;
}

.card-hover:hover {
    box-shadow: var(--tblr-box-shadow-hover);
    border-color: #cbd5e1;
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--tblr-border-color);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background-color: #f8fafc;
    border-top: 1px solid var(--tblr-border-color);
    padding: 0.75rem 1.25rem;
}

/* Card Status Strips */
.card-status-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
}

.card-status-start {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    z-index: 1;
}

.card-status-primary { background-color: var(--tblr-primary); }
.card-status-success { background-color: var(--tblr-success); }
.card-status-warning { background-color: var(--tblr-warning); }
.card-status-danger  { background-color: var(--tblr-danger); }
.card-status-info    { background-color: var(--tblr-info); }
.card-status-purple  { background-color: var(--tblr-purple); }
.card-status-secondary { background-color: var(--tblr-secondary); }

/* Tabler Light Badges (.bg-*-lt) */
.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    border-radius: var(--tblr-border-radius-sm);
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    vertical-align: middle;
}

.bg-blue-lt,
.bg-primary-lt {
    color: #0054a6 !important;
    background-color: rgba(0, 84, 166, 0.08) !important;
    border: 1px solid rgba(0, 84, 166, 0.18) !important;
}

.bg-green-lt,
.bg-success-lt {
    color: #2fb344 !important;
    background-color: rgba(47, 179, 68, 0.08) !important;
    border: 1px solid rgba(47, 179, 68, 0.18) !important;
}

.bg-yellow-lt,
.bg-warning-lt {
    color: #d97706 !important;
    background-color: rgba(245, 159, 0, 0.1) !important;
    border: 1px solid rgba(245, 159, 0, 0.22) !important;
}

.bg-red-lt,
.bg-danger-lt {
    color: #d63939 !important;
    background-color: rgba(214, 57, 57, 0.08) !important;
    border: 1px solid rgba(214, 57, 57, 0.18) !important;
}

.bg-cyan-lt,
.bg-info-lt {
    color: #0ca678 !important;
    background-color: rgba(12, 166, 120, 0.08) !important;
    border: 1px solid rgba(12, 166, 120, 0.18) !important;
}

.bg-secondary-lt {
    color: #64748b !important;
    background-color: rgba(100, 116, 139, 0.08) !important;
    border: 1px solid rgba(100, 116, 139, 0.18) !important;
}

.bg-purple {
    background-color: #ae3ec9 !important;
    color: #ffffff !important;
}

.bg-purple-lt,
.bg-purple-subtle {
    color: #ae3ec9 !important;
    background-color: rgba(174, 62, 201, 0.08) !important;
    border: 1px solid rgba(174, 62, 201, 0.18) !important;
}

.text-purple {
    color: #ae3ec9 !important;
}

.border-purple-subtle {
    border-color: rgba(174, 62, 201, 0.25) !important;
}

/* Status Dots & Pulsating Animations */
.status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}

.status-dot.status-green { color: #2fb344; }
.status-dot.status-blue { color: #0054a6; }
.status-dot.status-yellow { color: #f59f00; }
.status-dot.status-red { color: #d63939; }
.status-dot.status-gray { color: #94a3b8; }

.status-dot-animated {
    animation: status-pulse 1.8s infinite ease-in-out;
}

@keyframes status-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 84, 166, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(0, 84, 166, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 84, 166, 0);
    }
}

/* Tabler Table Styling */
.table {
    --bs-table-color: var(--tblr-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tblr-border-color);
    margin-bottom: 0;
    vertical-align: middle;
}

.table thead th {
    font-size: 0.725rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-muted);
    background-color: #f8fafc;
    border-bottom: 1px solid var(--tblr-border-color);
    padding: 0.65rem 1rem;
    white-space: nowrap;
}

.table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color);
    font-size: 0.85rem;
}

.table-hover tbody tr:hover {
    background-color: #f8fafc;
}

.table-vcenter td, .table-vcenter th {
    vertical-align: middle;
}

/* Tabler Empty State */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.empty-icon {
    font-size: 2.75rem;
    line-height: 1;
    color: #94a3b8;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f1f5f9;
}

.empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    margin-bottom: 0.4rem;
}

.empty-subtitle {
    font-size: 0.875rem;
    color: var(--tblr-muted);
    max-width: 460px;
    margin-bottom: 1.25rem;
}

.empty-action {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Forms & Inputs */
.form-control, .form-select {
    border-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    font-size: 0.875rem;
    padding: 0.5rem 0.8rem;
    color: var(--tblr-body-color);
    background-color: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #90b8f8;
    box-shadow: 0 0 0 0.2rem rgba(0, 84, 166, 0.12);
}

.form-label {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    margin-bottom: 0.35rem;
}

.form-text {
    font-size: 0.75rem;
    color: var(--tblr-muted);
    margin-top: 0.25rem;
}

/* Buttons */
.btn {
    border-radius: var(--tblr-border-radius);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
}

.btn-primary {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--tblr-primary-hover);
    border-color: var(--tblr-primary-hover);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--tblr-primary);
    border-color: var(--tblr-border-color);
    background-color: #ffffff;
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.btn-outline-secondary {
    color: var(--tblr-muted);
    border-color: var(--tblr-border-color);
    background-color: #ffffff;
}

.btn-outline-secondary:hover {
    color: var(--tblr-body-color);
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

/* Breadcrumbs */
.breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.825rem;
}

.breadcrumb-item a {
    color: var(--tblr-muted);
}

.breadcrumb-item a:hover {
    color: var(--tblr-primary);
}

.breadcrumb-item.active {
    color: var(--tblr-body-color);
    font-weight: 500;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* In-Page Target Element Pulse Highlight */
@keyframes target-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 84, 166, 0.5); }
    50% { box-shadow: 0 0 0 10px rgba(0, 84, 166, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(0, 84, 166, 0); }
}

.highlight-target {
    animation: target-pulse 1.8s ease-out;
    border: 2px solid var(--tblr-primary) !important;
    transition: all 0.3s ease;
}

/* ==========================================================================
   Design System Inspirations:
   1. Scrolltide (cinematic scroll-driven telemetry stream & interactive timeline)
   2. Navbar Gallery (frosted glass floating pill header & announcement chip)
   3. Footer Design (architectural dark footer, live status beacon, newsletter)
   4. CTA Gallery (ambient glow bento card, terminal snippet, social proof)
   5. Refro Styles (tactile borders, monospace kbd chips, neo-brutalist bento)
   6. Superhero (cinematic hero section, floating metric cards, multi-tab console)
   7. 3D Icons (volumetric SVG icons with gradients, shadows, specular highlights)
   ========================================================================== */

/* 1. 3D Icons (inspired by 3dicons.co) */
.icon-3d-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    user-select: none;
    flex-shrink: 0;
}
.icon-3d-wrapper:hover {
    transform: translateY(-4px) scale(1.05);
}
.icon-3d-sm { width: 32px; height: 32px; }
.icon-3d-md { width: 48px; height: 48px; }
.icon-3d-lg { width: 64px; height: 64px; }
.icon-3d-xl { width: 88px; height: 88px; }
.icon-3d-2xl { width: 120px; height: 120px; }
.icon-3d-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 2. Navbar Gallery (Frosted glass floating pill & header) */
.navbar-gallery-floating {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    transition: all 0.3s ease;
    z-index: 1030;
}
.nav-announcement-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.75rem;
    border-radius: 9999px;
    background: rgba(0, 84, 166, 0.08);
    color: var(--tblr-primary);
    border: 1px solid rgba(0, 84, 166, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.nav-announcement-chip:hover {
    background: rgba(0, 84, 166, 0.15);
    color: var(--tblr-primary-hover);
    transform: translateY(-1px);
}
.nav-link-pill {
    padding: 0.45rem 0.95rem !important;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569 !important;
    transition: all 0.2s ease;
}
.nav-link-pill:hover,
.nav-link-pill.active {
    color: var(--tblr-primary) !important;
    background: rgba(0, 84, 166, 0.08);
}
.btn-glow-primary {
    background: linear-gradient(135deg, #0054a6 0%, #0284c7 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 84, 166, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.btn-glow-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 84, 166, 0.45);
    background: linear-gradient(135deg, #00468c 0%, #0369a1 100%);
}

/* 3. Superhero Hero Section */
.hero-superhero {
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(224, 242, 254, 0.7) 0%, rgba(248, 250, 252, 0.95) 55%, #ffffff 100%);
    overflow: hidden;
}
.hero-dot-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(148, 163, 184, 0.25) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}
.hero-content-wrapper {
    position: relative;
    z-index: 1;
}
.hero-headline-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0054a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
}
.floating-metric-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 0.65rem 0.95rem;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.12);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    animation: hero-float 4s ease-in-out infinite alternate;
}
.floating-badge-top-right {
    top: -16px;
    right: -14px;
    animation-delay: 0s;
}
.floating-badge-bottom-left {
    bottom: -18px;
    left: -16px;
    animation-delay: 2s;
}
@keyframes hero-float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-8px); }
}

.hero-console-window {
    background: #0b1120;
    border: 1px solid #1e293b;
    border-radius: 14px;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.hero-console-header {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
    padding: 0.65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-tab-pill {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    color: #94a3b8;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.hero-tab-pill:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
}
.hero-tab-pill.active {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    font-weight: 600;
}

/* 4. Scrolltide Interactive Lifecycle Section */
.scrolltide-section {
    background: #f8fafc;
    border-top: 1px solid var(--tblr-border-color);
    border-bottom: 1px solid var(--tblr-border-color);
    position: relative;
    overflow: hidden;
}
.scrolltide-track {
    display: flex;
    position: relative;
    gap: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}
.scrolltide-step-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.scrolltide-step-btn.active {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid #cbd5e1;
}
.scrolltide-step-btn.active::after {
    content: '';
    position: absolute;
    bottom: -0.65rem;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--tblr-primary);
    border-radius: 3px;
}
.scrolltide-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.scrolltide-step-btn.active .scrolltide-step-num {
    background: var(--tblr-primary);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 84, 166, 0.4);
}
.scrolltide-content-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    transition: all 0.3s ease;
}

/* 5. Refro Styles (tactile neo-brutalist / modern retro developer touches) */
.refro-card {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 0 0 #cbd5e1, 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.refro-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 0 0 #94a3b8, 0 12px 20px rgba(0, 0, 0, 0.06);
    border-color: #94a3b8;
}
.refro-badge {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    letter-spacing: 0.02em;
}
.refro-kbd {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.1;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: 2px solid #94a3b8;
    border-radius: 4px;
    box-shadow: inset 0 -1px 0 #cbd5e1;
}

/* 6. CTA Gallery Bento & Quick Deploy Snippet */
.cta-bento-card {
    position: relative;
    background: linear-gradient(135deg, #0b1120 0%, #0f172a 60%, #1e293b 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 84, 166, 0.25);
}
.cta-bento-glow {
    position: absolute;
    top: -40%;
    left: 20%;
    right: 20%;
    height: 250px;
    background: radial-gradient(ellipse at center, rgba(0, 84, 166, 0.45) 0%, rgba(174, 62, 201, 0.15) 50%, transparent 80%);
    pointer-events: none;
    filter: blur(40px);
}
.terminal-snippet-box {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 8px;
    padding: 0.65rem 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.8rem;
    color: #38bdf8;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.terminal-copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    border-radius: 5px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.terminal-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* 7. Footer Design (Architectural, Status Beacon, Newsletter) */
.footer-cinematic {
    background: #080c16;
    color: #94a3b8;
    border-top: 1px solid #1e293b;
    position: relative;
}
.footer-top-gradient-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #0054a6 0%, #ae3ec9 50%, #0ca678 100%);
}
.footer-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #e2e8f0;
}
.status-beacon-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: beacon-pulse 2s infinite ease-in-out;
}
@keyframes beacon-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}
.footer-newsletter-input {
    background: #0f172a;
    border: 1px solid #334155;
    color: #f8fafc;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
}
.footer-newsletter-input:focus {
    background: #1e293b;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}
.footer-col-title {
    color: #ffffff;
    font-size: 0.825rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.footer-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.825rem;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
}
.footer-link:hover {
    color: #38bdf8;
    transform: translateX(2px);
}
.social-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #0f172a;
    border: 1px solid #1e293b;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.social-icon-btn:hover {
    color: #ffffff;
    background: #1e293b;
    border-color: #38bdf8;
    transform: translateY(-2px);
}