/* Docker Theme Overrides */

:root {
    --docker-blue: #2496ED;
    --docker-blue-dark: #1D7FC5;
    --docker-blue-light: #3BA5F7;
    --container-cyan: #00D9FF;
    --whale-blue: #1488C6;
    --gradient-docker: linear-gradient(135deg, #2496ED 0%, #00D9FF 100%);
    --gradient-docker-dark: linear-gradient(135deg, #1D7FC5 0%, #0099CC 100%);
}

/* Hero Section - Docker Blue Theme */
.hero {
    background: linear-gradient(180deg, #0a0e27 0%, #0d1430 50%, #111a3e 100%);
}

.hero-bg-glow {
    background: radial-gradient(ellipse at center, rgba(36, 150, 237, 0.15) 0%, transparent 70%);
}

.glitch-text {
    color: var(--docker-blue-light);
    text-shadow: 
        0 0 10px rgba(36, 150, 237, 0.5),
        0 0 20px rgba(36, 150, 237, 0.3),
        0 0 30px rgba(36, 150, 237, 0.2);
}

.glitch-text::before {
    text-shadow: -2px 0 var(--container-cyan);
}

.glitch-text::after {
    text-shadow: 2px 0 var(--docker-blue);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-docker);
    border: 2px solid var(--docker-blue);
}

.btn-primary:hover {
    background: var(--gradient-docker-dark);
    box-shadow: 0 0 30px rgba(36, 150, 237, 0.4);
}

.btn-outline {
    border: 2px solid var(--docker-blue);
    color: var(--docker-blue-light);
}

.btn-outline:hover {
    background: rgba(36, 150, 237, 0.1);
    border-color: var(--container-cyan);
    color: var(--container-cyan);
}

/* Status Badge */
.status-badge {
    background: rgba(36, 150, 237, 0.1);
    border: 1px solid var(--docker-blue);
    color: var(--docker-blue-light);
}

.dot-pulse {
    background: var(--container-cyan);
    box-shadow: 0 0 10px var(--container-cyan);
}

/* Shield/Container Graphic */
.shield-graphic i {
    color: var(--docker-blue);
    filter: drop-shadow(0 0 20px rgba(36, 150, 237, 0.6));
}

.shield-graphic .glow {
    background: radial-gradient(circle, var(--docker-blue) 0%, transparent 70%);
}

.orbit-1, .orbit-2 {
    border-color: rgba(36, 150, 237, 0.3);
}

/* Feature Cards */
.feature-card {
    border: 1px solid rgba(36, 150, 237, 0.2);
    background: linear-gradient(135deg, rgba(36, 150, 237, 0.05) 0%, rgba(0, 217, 255, 0.03) 100%);
}

.feature-card:hover {
    border-color: var(--docker-blue);
    box-shadow: 0 10px 40px rgba(36, 150, 237, 0.2);
}

.feature-card i {
    background: var(--gradient-docker);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Pricing Cards */
.pricing-card {
    border: 1px solid rgba(36, 150, 237, 0.2);
}

.pricing-card.popular {
    border-color: var(--docker-blue);
    box-shadow: 0 0 40px rgba(36, 150, 237, 0.3);
}

.popular-badge {
    background: var(--gradient-docker);
}

.pricing-card:hover .card-glow {
    background: radial-gradient(circle at center, var(--docker-blue) 0%, transparent 70%);
}

.price .currency,
.price .amount {
    color: var(--docker-blue-light);
}

/* Marquee Items - Docker Tools */
.marquee-item {
    border: 1px solid rgba(36, 150, 237, 0.3);
    background: rgba(36, 150, 237, 0.05);
}

.marquee-item:hover {
    border-color: var(--docker-blue);
    background: rgba(36, 150, 237, 0.1);
    box-shadow: 0 5px 20px rgba(36, 150, 237, 0.2);
}

.badge.tcp {
    background: var(--gradient-docker);
}

.badge.udp {
    background: linear-gradient(135deg, #00D9FF 0%, #2496ED 100%);
}

/* Infrastructure Visualization */
.network-hub .hub-pulse {
    background: rgba(36, 150, 237, 0.3);
}

.hub-core {
    background: var(--gradient-docker);
    box-shadow: 0 0 30px rgba(36, 150, 237, 0.5);
}

.connection-node .node-dot {
    background: var(--docker-blue);
    box-shadow: 0 0 15px var(--container-cyan);
}

.data-flow {
    background: var(--gradient-docker);
}

/* Discord Section */
.discord-icon-container i {
    color: var(--docker-blue);
}

.pulse-circle {
    border-color: var(--docker-blue);
}

.btn-discord {
    background: var(--gradient-docker);
}

.btn-discord:hover {
    background: var(--gradient-docker-dark);
}

/* FAQ Accordion */
.accordion-item {
    border: 1px solid rgba(36, 150, 237, 0.2);
}

.accordion-header:hover {
    background: rgba(36, 150, 237, 0.1);
}

.accordion-item.active .accordion-header {
    background: rgba(36, 150, 237, 0.15);
    color: var(--docker-blue-light);
}

/* Check List */
.check-list i {
    color: var(--container-cyan);
}

/* Section Titles */
.section-title {
    background: var(--gradient-docker);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Links & Hover Effects */
a:hover,
.nav-links a:hover {
    color: var(--docker-blue-light);
}

/* Container-Inspired Visual Elements */
.shield-graphic::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border: 2px dashed rgba(36, 150, 237, 0.2);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Glow Effects for Docker Theme */
.glow-effect {
    position: relative;
}

.glow-effect::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-docker);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(10px);
}

.glow-effect:hover::before {
    opacity: 0.6;
}

/* Navigation Active State */
.navbar {
    border-bottom: 1px solid rgba(36, 150, 237, 0.1);
}

/* Footer Adjustments */
footer {
    border-top: 1px solid rgba(36, 150, 237, 0.2);
}

footer a:hover {
    color: var(--docker-blue-light);
}