/* Step 3 CSS - Infrastructure / Cyber / Tech */

/* ===== Dark Mode (Default) ===== */
body.step3-mode {
    background-color: #0a0a0a;
    color: #f0f0f0;
}

/* ===== Light Mode ===== */
body.step3-light {
    background-color: #ffffff;
    color: #1a1a1a;
}

.step3-page {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

.mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ===== Grid Background - Dark ===== */
.bg-grid-cyan {
    background-image: linear-gradient(to right, #1a1a1a 1px, transparent 1px),
        linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ===== Grid Background - Light ===== */
.bg-grid-cyan-light {
    background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px),
        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ===== Service Card Hover Effect ===== */
.s3-card {
    transition: all 0.3s ease;
}

.s3-card:hover {
    border-color: #00f0ff !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
    transform: translateY(-2px);
}

/* ===== Code Window ===== */
.code-window {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.code-header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

/* ===== Custom Scrollbar for Code ===== */
.custom-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ===== Smooth Transitions ===== */
.step3-page * {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Exclude elements that need instant transition */
.step3-page button,
.step3-page a,
.step3-page .s3-card {
    transition: all 0.3s ease;
}