/* ============================
   CODARY Theme V2 — "Pixel Hero"
   ============================ */

/* Тёмная тема — тёмный тил, три акцента: лайм + жёлтый + синий */
:root {
    --bg-primary: #0d1a18;
    --bg-secondary: #122420;
    --bg-card: #162e28;
    --bg-card-hover: #1c3830;
    --text-primary: #e8f6f4;
    --text-secondary: #7ab8b0;
    --text-muted: #3a7870;
    --accent-1: #6bc520;   /* лайм — главные CTA */
    --accent-2: #ffd700;   /* жёлтый — бейджи, ghost */
    --accent-3: #2a9d8f;   /* бирюза/синий — вторичные элементы */
    --accent-4: #f4a261;
    --gradient: linear-gradient(135deg, #6bc520, #ffd700, #2a9d8f);
    --gradient-text: linear-gradient(135deg, #6bc520, #ffd700);
    --border: rgba(42, 157, 143, 0.2);
    --border-hover: rgba(107, 197, 32, 0.35);
    --shadow-sm: 4px 4px 0px rgba(0, 0, 0, 0.5);
    --shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.6);
    --shadow-lg: 8px 8px 0px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 24px rgba(42, 157, 143, 0.3);
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --transition: 0.15s steps(3);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-pixel: 'Press Start 2P', monospace;
    --pixel-border: 3px solid var(--accent-3);
    --pixel-shadow: 4px 4px 0 #000;
    --px-shadow: #000;
}

/* Светлая тема */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f2f9f8;
    --bg-card: #ffffff;
    --bg-card-hover: #edf7f5;
    --text-primary: #0d1a18;
    --text-secondary: #1a4a44;
    --text-muted: #4a7a74;
    --accent-1: #4a9a10;
    --accent-2: #c8900a;
    --accent-3: #1e7a6e;
    --accent-4: #d4601a;
    --gradient: linear-gradient(135deg, #4a9a10, #c8900a, #1e7a6e);
    --gradient-text: linear-gradient(135deg, #4a9a10, #c8900a);
    --border: rgba(42, 157, 143, 0.18);
    --border-hover: rgba(74, 154, 16, 0.35);
    --shadow-sm: 4px 4px 0px rgba(0, 0, 0, 0.18);
    --shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.22);
    --shadow-lg: 8px 8px 0px rgba(0, 0, 0, 0.26);
    --shadow-glow: 0 0 20px rgba(42, 157, 143, 0.15);
    --px-shadow: rgba(0,0,0,0.28);
}

/* ============================
   Логотип
   ============================ */
.logo-img {
    content: url('/images/logo2.jpg');
    width: 44px;
    height: 44px;
    border: 2px solid var(--accent-1);
    box-shadow: 2px 2px 0 var(--px-shadow);
}

/* ============================
   Hero — плавные фоновые анимации
   ============================ */

@keyframes hero-drift {
    0%   { transform: translateX(-50%) translateY(0)   scale(1);    }
    33%  { transform: translateX(-48%) translateY(-4%) scale(1.05); }
    66%  { transform: translateX(-52%) translateY(3%)  scale(0.97); }
    100% { transform: translateX(-50%) translateY(0)   scale(1);    }
}


.hero-gradient {
    background: radial-gradient(circle,
        rgba(42, 157, 143, 0.18) 0%,
        rgba(107, 197, 32, 0.08) 45%,
        transparent 70%);
    width: 900px;
    height: 900px;
    animation: hero-drift 12s ease-in-out infinite;
}

.hero-grid {
    background-image:
        linear-gradient(rgba(42, 157, 143, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 157, 143, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}


/* Пиксельные точки — медленно смещаются */
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(42, 157, 143, 0.4) 2px, transparent 2px),
        radial-gradient(circle, rgba(107, 197, 32, 0.3) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 215, 0, 0.2) 2px, transparent 2px);
    background-size: 48px 48px, 72px 72px, 96px 96px;
    background-position: 0 0, 24px 24px, 12px 36px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* ============================
   Кнопки — лайм + жёлтый
   ============================ */

/* Основная кнопка — лайм, hover — жёлтый, active — жёлтый нажатый */
.btn-primary {
    background: var(--accent-1);
    color: #0a1a12;
    border: 2px solid #3a7a10;
    box-shadow: 4px 4px 0 var(--px-shadow);
    text-shadow: none;
}

.btn-primary:hover {
    background: var(--accent-2);
    color: #0a1a12;
    border-color: #a07800;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--px-shadow);
}

.btn-primary:active {
    background: var(--accent-2);
    color: #0a1a12;
    border-color: #a07800;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--px-shadow);
}

/* Ghost кнопка — синяя, hover/active — жёлтый */
.btn-ghost {
    background: transparent;
    color: var(--accent-3);
    border: 2px solid var(--accent-3);
    box-shadow: 4px 4px 0 var(--px-shadow);
}

.btn-ghost:hover {
    background: var(--accent-2);
    color: #0a1a12;
    border-color: #a07800;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--px-shadow);
}

.btn-ghost:active {
    background: var(--accent-2);
    color: #0a1a12;
    border-color: #a07800;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--px-shadow);
}

/* ============================
   Портфолио — полный пиксельный стиль
   ============================ */
.portfolio-card {
    border: 2px solid var(--accent-1);
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 var(--px-shadow);
    transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}

.portfolio-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 8px 8px 0 var(--px-shadow) !important;
    border-color: var(--accent-2);
}

.portfolio-preview {
    background: linear-gradient(135deg,
        rgba(107, 197, 32, 0.1),
        rgba(255, 215, 0, 0.06)) !important;
    border-bottom: 2px solid var(--accent-1);
}

.portfolio-preview-featured {
    background: linear-gradient(135deg,
        rgba(107, 197, 32, 0.15),
        rgba(255, 215, 0, 0.08)) !important;
}

/* Теги внутри превью и info — синий */
.ptag {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(42, 157, 143, 0.15);
    border: 2px solid var(--accent-3);
    border-radius: 0 !important;
    font-size: 0.65rem;
    font-family: var(--font-pixel);
    color: var(--accent-3);
    font-weight: 400;
    box-shadow: 2px 2px 0 var(--px-shadow);
}

.portfolio-tags span {
    background: rgba(42, 157, 143, 0.1) !important;
    border: 2px solid var(--accent-3) !important;
    border-radius: 0 !important;
    color: var(--accent-3) !important;
    font-family: var(--font-pixel);
    font-size: 10px !important;
    box-shadow: 2px 2px 0 var(--px-shadow);
}

/* Бейдж "Написан с нуля" */
.portfolio-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 215, 0, 0.12);
    border: 2px solid var(--accent-2);
    border-radius: 0 !important;
    font-size: 9px;
    font-family: var(--font-pixel);
    color: var(--accent-2);
    white-space: nowrap;
    box-shadow: 2px 2px 0 var(--px-shadow);
}

/* Галочки в списке */
.check-icon {
    color: var(--accent-1);
}

/* Ссылки-кнопки в карточках — синий, hover — лайм */
.portfolio-link {
    background: rgba(42, 157, 143, 0.1) !important;
    border: 2px solid var(--accent-3) !important;
    border-radius: 0 !important;
    color: var(--accent-3) !important;
    font-family: var(--font-pixel);
    font-size: 9px !important;
    box-shadow: 3px 3px 0 var(--px-shadow);
    transition: transform 0.1s steps(2), box-shadow 0.1s steps(2) !important;
}

.portfolio-link:hover {
    background: var(--accent-1) !important;
    color: #0a1a12 !important;
    border-color: var(--accent-1) !important;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--px-shadow) !important;
}

/* ============================
   Карточки курсов — чередуем синий/зелёный
   ============================ */
.course-card {
    border: 2px solid var(--accent-3);   /* синий по умолчанию */
    box-shadow: 5px 5px 0 var(--px-shadow);
}

.course-card:hover {
    border-color: var(--accent-1);       /* зелёный при наведении */
}

.course-card.featured {
    border-color: var(--accent-2);       /* жёлтый у featured */
    background: linear-gradient(135deg,
        rgba(42, 157, 143, 0.07),
        rgba(107, 197, 32, 0.04));
    box-shadow: 5px 5px 0 var(--accent-3);
}

/* ============================
   Иконки — пиксельные спрайт-рамки
   ============================ */

/* Иконки карточек курсов/услуг */
.course-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
    border: 3px solid var(--accent-1);
    background: rgba(107, 197, 32, 0.1);
    box-shadow: 4px 4px 0 var(--px-shadow);
    position: relative;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Внутренняя рамка — пиксельный эффект двойной границы */
.course-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(107, 197, 32, 0.25);
    pointer-events: none;
}

/* Чередуем цвета рамок через nth-child */
.course-card:nth-child(2) .course-icon,
.course-card:nth-child(5) .course-icon,
.course-card:nth-child(8) .course-icon {
    border-color: var(--accent-3);
    background: rgba(42, 157, 143, 0.1);
    box-shadow: 4px 4px 0 var(--px-shadow);
}
.course-card:nth-child(2) .course-icon::after,
.course-card:nth-child(5) .course-icon::after,
.course-card:nth-child(8) .course-icon::after {
    border-color: rgba(42, 157, 143, 0.25);
}

.course-card:nth-child(3) .course-icon,
.course-card:nth-child(6) .course-icon,
.course-card:nth-child(9) .course-icon {
    border-color: var(--accent-2);
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 4px 4px 0 var(--px-shadow);
}
.course-card:nth-child(3) .course-icon::after,
.course-card:nth-child(6) .course-icon::after,
.course-card:nth-child(9) .course-icon::after {
    border-color: rgba(255, 215, 0, 0.25);
}

/* Портфолио — слот инвентаря */
.portfolio-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    border: 3px solid var(--accent-3);
    background: rgba(42, 157, 143, 0.1);
    box-shadow: 4px 4px 0 var(--px-shadow);
    position: relative;
}

.portfolio-placeholder::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(42, 157, 143, 0.2);
    pointer-events: none;
}

/* Статистика в hero */
.stat-value {
    font-family: var(--font-pixel);
    font-size: 20px !important;
    color: var(--accent-1);
}

/* ============================
   Статы в карточках продуктов
   ============================ */
.course-stat {
    background: rgba(42, 157, 143, 0.08) !important;
    border: 2px solid var(--accent-3) !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 0 var(--px-shadow);
}

.course-stat .cs-val {
    font-family: var(--font-pixel);
    font-size: 13px !important;
    color: var(--accent-1) !important;
}

.course-stat .cs-lbl {
    font-size: 8px !important;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* Результат / CTA-строка в карточке */
.course-result {
    background: rgba(107, 197, 32, 0.08) !important;
    border: 2px solid var(--accent-1) !important;
    border-radius: 0 !important;
    color: var(--accent-1) !important;
    font-family: var(--font-pixel);
    font-size: 10px !important;
    box-shadow: 3px 3px 0 var(--px-shadow);
}

/* Номера шагов — пиксельный чип */
.step-num {
    font-family: var(--font-pixel) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: var(--accent-2) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 3px solid var(--accent-2);
    box-shadow: 4px 4px 0 var(--px-shadow);
    margin-bottom: 16px;
    line-height: 1;
}

/* ============================
   FAQ
   ============================ */
.faq-question:hover { color: var(--accent-2); }
.faq-item.active .faq-icon { color: var(--accent-2); }
.faq-item { border-bottom: 2px solid var(--border); }

/* ============================
   Pricing / Services / Steps
   ============================ */
.pricing-card,
.service-card,
.step-card,
.feature-card {
    border: 2px solid var(--accent-1) !important;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 var(--px-shadow) !important;
    transition: transform 0.1s steps(2), box-shadow 0.1s steps(2) !important;
}

.pricing-card:hover,
.service-card:hover,
.step-card:hover,
.feature-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 8px 8px 0 var(--px-shadow) !important;
}

/* Популярный тариф — жёлтая рамка */
.pricing-card.featured,
.pricing-card.popular {
    border-color: var(--accent-2) !important;
    box-shadow: 5px 5px 0 var(--accent-1) !important;
}

/* ============================
   Бейдж, метки, теги — синий/тил
   ============================ */
.hero-badge {
    background: rgba(42, 157, 143, 0.1);
    border: 2px solid var(--accent-3);
    color: var(--accent-3);
}

.badge-dot {
    background: var(--accent-2);     /* жёлтая мигающая точка */
}

.section-label {
    color: var(--accent-3);          /* синий для меток */
    border-color: var(--accent-3);
}

.skill-tag {
    background: rgba(42, 157, 143, 0.08);
    border-color: var(--accent-3);
    color: var(--accent-3);
}

/* ============================
   Ретро-терминал — синий/тил монитор
   ============================ */
.code-window {
    border-color: var(--accent-3);
    box-shadow: 8px 8px 0 var(--px-shadow), 0 0 30px rgba(42, 157, 143, 0.25);
}

.code-header {
    background: var(--accent-3);
    border-bottom-color: #1a6b5f;
}

.code-title { color: #fff; }

.code-window::before {
    background: repeating-linear-gradient(
        0deg,
        rgba(42, 157, 143, 0.025) 0px,
        rgba(42, 157, 143, 0.025) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* ============================
   Светлая тема — переопределения
   ============================ */
[data-theme="light"] .header.scrolled {
    background: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .hero-grid {
    background-image:
        linear-gradient(rgba(74, 154, 16, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 154, 16, 0.1) 1px, transparent 1px);
}

[data-theme="light"] .hero-gradient {
    background: radial-gradient(circle,
        rgba(107, 197, 32, 0.1) 0%,
        rgba(255, 215, 0, 0.05) 50%,
        transparent 70%);
}

[data-theme="light"] .hero-bg::after {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.02) 0px,
        rgba(0, 0, 0, 0.02) 1px,
        transparent 1px,
        transparent 4px
    );
}

[data-theme="light"] .code-window {
    background: #0d1a10;
    border-color: var(--accent-1);
    box-shadow: 8px 8px 0 rgba(0,0,0,0.25), 0 0 20px rgba(74,154,16,0.12);
}
[data-theme="light"] .code-body  { color: #a8e8a8; }
[data-theme="light"] .code-title { color: #fff; }

[data-theme="light"] .btn-primary {
    color: #0a1a12;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.28);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:active {
    color: #0a1a12;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.28);
}
[data-theme="light"] .btn-ghost {
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-ghost:active {
    color: #0a1a12;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
}

[data-theme="light"] .course-card        { box-shadow: 5px 5px 0 rgba(0,0,0,0.18); }
[data-theme="light"] .course-card:hover  { box-shadow: 8px 8px 0 rgba(0,0,0,0.18); }
[data-theme="light"] .course-card.featured { box-shadow: 5px 5px 0 var(--accent-1); }

[data-theme="light"] .hero-badge,
[data-theme="light"] .section-label,
[data-theme="light"] .skill-tag          { box-shadow: 2px 2px 0 rgba(0,0,0,0.14); }

[data-theme="light"] .service-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .portfolio-card,
[data-theme="light"] .step-card          { box-shadow: 4px 4px 0 rgba(0,0,0,0.14) !important; }

[data-theme="light"] .service-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .portfolio-card:hover,
[data-theme="light"] .step-card:hover    { box-shadow: 7px 7px 0 rgba(0,0,0,0.14) !important; }