/* css/core-toolkit-preview.css */
/* --- Tech-Themed Core Language Toolkit Sneak Peek Section (for index.html) --- */
/* Main Section Background and Styling */
.core-toolkit-preview-section.tech-theme { /* Add 'tech-theme' class to your <section> in HTML */
    margin-top: 0; /* Assuming it follows the dark routine preview */
    padding: 80px 0; /* Generous padding */
    background-color: #0a192f; /* Dark blue fallback */
    background-image:
        /* Optional: Subtle SVG pattern for tech feel */
        url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300A9FF' fill-opacity='0.07' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(145deg,
            #0d1b2a 0%,  /* Deep Navy */
            #1a3a6d 30%, /* Mid-Dark Blue */
            #004AAD 60%, /* Brighter Tech Blue */
            #0077CC 100% /* Lighter Tech Blue */
        );
    color: var(--light-text, #e0f2f7); /* Light text for dark BG */
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(0, 169, 255, 0.3); /* Cyan-ish border */
    border-bottom: 2px solid rgba(0, 169, 255, 0.3);
}

.core-toolkit-preview-section.tech-theme::before { /* Optional: Scanline effect */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 4px 100%;
    z-index: 1;
    pointer-events: none; /* Allows clicks through */
}

.core-toolkit-preview-section.tech-theme .container {
    position: relative; /* To sit above the ::before */
    z-index: 2;
}


.core-toolkit-eyebrow.tech-theme { /* Add 'tech-theme' to your eyebrow span in HTML */
    display: inline-block;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #00A9FF; /* Bright Cyan/Tech Blue */
    text-transform: uppercase;
    letter-spacing: 2px; /* Wider spacing */
    margin-bottom: 0.75rem;
    padding: 0.4rem 1rem;
    background-color: rgba(0, 169, 255, 0.1); /* Faint blue bg */
    border: 1px solid rgba(0, 169, 255, 0.3);
    border-radius: 20px;
}

.core-toolkit-preview-section.tech-theme .section-title {
    color: #E0F2F7; /* Lighter text for dark bg */
    text-shadow: 0 0 10px rgba(0, 169, 255, 0.5), 0 0 5px rgba(0, 169, 255, 0.3); /* Neon-like glow */
}
.core-toolkit-preview-section.tech-theme .section-title::after {
    background-color: #00A9FF; /* Cyan underline */
    box-shadow: 0 0 8px rgba(0, 169, 255, 0.7);
}

.core-toolkit-preview-section.tech-theme .section-subtitle {
    color: #b0c4de; /* Lighter blue-grey */
    margin-bottom: 3.5rem;
    font-size: 1.1rem;
}

.core-toolkit-grid-index.tech-theme { /* Add 'tech-theme' to your grid div in HTML */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; /* Slightly larger gap */
}

.app-preview-card-index.tech-theme { /* Add 'tech-theme' to your card divs in HTML */
    background-color: rgba(10, 25, 47, 0.8); /* Darker, semi-transparent panel */
    backdrop-filter: blur(5px);
    border-radius: 8px; /* Sharper edges */
    padding: 1.8rem;
    box-shadow: 0 0 20px rgba(0, 169, 255, 0.15), 0 0 5px rgba(0, 169, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 169, 255, 0.25); /* Cyan border */
    border-left-width: 4px; /* Emphasize left border */
    border-left-color: #00A9FF; /* Bright Cyan */
}
.app-preview-card-index.tech-theme:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 0 30px rgba(0, 169, 255, 0.25), 0 0 10px rgba(0, 169, 255, 0.2);
    border-color: rgba(0, 169, 255, 0.5);
    border-left-color: var(--accent-yellow); /* Highlight on hover */
}

.app-preview-header-index.tech-theme { /* Add 'tech-theme' */
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.app-preview-logo-index.tech-theme { /* Add 'tech-theme' */
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px; /* Slightly less rounded */
    /* Optional: Add a subtle glow or border to logos */
    /* filter: drop-shadow(0 0 3px rgba(0, 169, 255, 0.5)); */
}
.app-preview-title-group-index.tech-theme h3 { /* Add 'tech-theme' */
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--light-text); /* Light text */
    margin: 0 0 0.1rem 0;
}
.app-preview-tagline-index.tech-theme { /* Add 'tech-theme' */
    font-size: 0.85rem;
    color: #9FB6D4; /* Lighter tech blue-grey */
    font-style: normal; /* Less italic, more direct */
    /* font-family: 'Roboto Mono', monospace; /* Optional monospaced font */
}

.app-preview-skills-index.tech-theme { /* Add 'tech-theme' */
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.skill-tag.tech-theme { /* Add 'tech-theme' */
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 4px; /* Sharper tags */
    display: inline-flex;
    align-items: center;
    background-color: rgba(0, 169, 255, 0.15); /* Faint cyan bg */
    color: #ADEBFF; /* Light cyan text */
    border: 1px solid rgba(0, 169, 255, 0.3);
    /* font-family: 'Roboto Mono', monospace; /* Optional monospaced font */
}
.skill-tag.tech-theme i { margin-right: 6px; font-size: 0.9em; }

/* This style for .app-preview-my-take-index.tech-theme was in your CSS but not used in the HTML you provided.
   I'm including it here in case you plan to use it or if it was an oversight. */
.app-preview-my-take-index.tech-theme { /* Add 'tech-theme' */
    font-size: 0.95rem;
    color: #c0d6f0; /* Lighter text for readability */
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.95em; /* Approx 3 lines (0.95rem * 1.65 * 3) */
}

.app-preview-link-index.btn.btn-outline.btn-small.tech-theme { /* Add 'tech-theme' */
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.85rem;
    color: var(--accent-yellow); /* Yellow for contrast */
    border-color: var(--accent-yellow);
    background-color: transparent;
    border-width: 2px;
    border-radius: 4px; /* Sharper button */
}
.app-preview-link-index.btn.btn-outline.btn-small.tech-theme:hover {
    background-color: var(--accent-yellow);
    color: var(--deep-space-blue);
    border-color: var(--accent-yellow);
}


/* --- Toolkit Level Guide Promo Box (Tech Theme) --- */
.toolkit-level-guide-promo-index.tech-theme { /* Add 'tech-theme' */
    background-color: rgba(0, 169, 255, 0.08); /* Very faint cyan */
    border: 1px solid rgba(0, 169, 255, 0.2);
    border-left-width: 5px;
    border-left-color: #00A9FF; /* Bright Cyan */
    padding: 1.8rem 2rem;
    border-radius: 6px;
    margin: 3.5rem auto;
    max-width: 750px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 169, 255, 0.1);
}
.toolkit-level-guide-promo-index.tech-theme h4 {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--light-text); /* Light text */
    margin-bottom: 0.75rem;
}
.toolkit-level-guide-promo-index.tech-theme h4 i {
    margin-right: 10px;
    color: #00A9FF; /* Bright Cyan */
}
.toolkit-level-guide-promo-index.tech-theme p {
    font-size: 1.05rem;
    color: #b0c4de; /* Lighter blue-grey */
    line-height: 1.7;
}
.toolkit-level-guide-promo-index.tech-theme p strong {
    color: var(--accent-yellow); /* Yellow for emphasis */
    font-weight: 600;
}

/* --- Main CTA Button (Tech Theme) --- */
.btn-toolkit-main-cta-index.btn.btn-primary.tech-theme { /* Add 'tech-theme' */
    padding: 1rem 2.5rem;
    font-size: 1.15rem;
    background-color: var(--accent-yellow);
    color: var(--deep-space-blue);
    border: none;
    border-radius: 5px; /* Sharper */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), 0 0 5px rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}
.btn-toolkit-main-cta-index.btn.btn-primary.tech-theme:hover {
    background-color: #ffd100; /* Brighter yellow */
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px) scale(1.02);
}
.btn-toolkit-main-cta-index.tech-theme i {
    margin-right: 10px;
}