/* ==================== DEVCORE MAIN STYLES ==================== */
/* Модульная архитектура CSS */

/* Base */
@import url('css/base/fonts.css');
@import url('css/base/variables.css');
@import url('css/base/reset.css');
@import url('css/base/typography.css');
@import url('css/base/layout.css');

/* Components */
@import url('css/components/navbar.css');
@import url('css/components/hero.css');
@import url('css/components/buttons.css');
@import url('css/components/cards.css');
@import url('css/components/forms.css');
@import url('css/components/tags.css');
@import url('css/components/modal.css');
@import url('css/components/footer.css');
@import url('css/components/stats.css');
@import url('css/components/micro-interactions.css');
@import url('css/components/services-filter.css');
@import url('css/components/about.css');
@import url('css/components/target-audience.css');
@import url('css/components/tasks.css');
@import url('css/components/cases.css');
@import url('css/components/process.css');
@import url('css/components/packages.css');
@import url('css/components/contacts.css');

/* Animations */
@import url('css/animations/cursor.css');
@import url('css/animations/effects.css');
@import url('css/animations/transitions.css');
@import url('css/animations/responsive.css');

/* Base Responsive */
@import url('css/base/responsive.css');

/* ==================== PAGE SPECIFIC STYLES ==================== */

.services {
    text-align: center;
    overflow: visible;
    position: relative;
}

/* Уникальный элемент - волнообразная линия внизу */
.services::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 30px,
            rgba(250, 144, 66, 0.1) 30px,
            rgba(250, 144, 66, 0.1) 35px
        );
    pointer-events: none;
}

.services .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.projects {
    background: linear-gradient(180deg, transparent 0%, rgba(250, 144, 66, 0.08) 50%, rgba(136, 133, 255, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/color-palette.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
}

/* Уникальный элемент - сетка из точек */
.projects::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle, rgba(250, 144, 66, 0.1) 1px, transparent 1px),
        radial-gradient(circle, rgba(136, 133, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px;
    background-position: 0 0, 25px 25px;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.projects > .container {
    position: relative;
    z-index: 1;
}

.projects .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.projects .container .section-header {
    grid-column: 1 / -1; /* Make the header span all columns */
    text-align: center;
    margin-bottom: var(--space-xl);
}