/* ========== development-works.css ========== */

.dev-hero{padding:80px 60px 60px;position:relative;overflow:hidden;text-align:center;background:radial-gradient(circle at center,rgba(66,33,112,0.2) 0%,transparent 70%);border-bottom:1px solid rgba(244,60,118,0.15)}
.dev-hero-content{position:relative;z-index:2}
.dev-hero-title{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.dev-title-line{font-family:'JetBrains Mono',monospace;font-size:5rem;font-weight:800;text-transform:uppercase;letter-spacing:3px;color:#bb99dd;line-height:1.1}
.dev-title-accent{color:#f43c76;text-shadow:0 0 30px rgba(244,60,118,0.6)}
.dev-hero-subtitle{font-family:'JetBrains Mono',monospace;font-size:1.2rem;color:#9977aa;margin-bottom:40px;letter-spacing:1px}

.dev-filter-section{padding:40px 60px 20px}
.dev-filter-wrapper{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.dev-filter-btn{font-family:'JetBrains Mono',monospace;font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;padding:10px 20px;background:rgba(12,7,28,0.6);border:1px solid rgba(244,60,118,0.2);color:#9977aa;cursor:pointer;transition:all 0.3s;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.dev-filter-btn:hover,.dev-filter-btn.active{background:rgba(244,60,118,0.15);border-color:#f43c76;color:#fff;box-shadow:0 0 20px rgba(244,60,118,0.3)}

.dev-projects-section{padding:40px 60px 80px}
.dev-projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.dev-project-card{background:rgba(12,7,28,0.7);border:1px solid rgba(244,60,118,0.15);transition:all 0.4s;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);animation:cardFadeIn 0.5s ease forwards}
.dev-project-card:hover{transform:translateY(-8px);border-color:#f43c76;box-shadow:0 20px 50px rgba(244,60,118,0.3)}
.dev-project-card.hidden{display:none}
@keyframes cardFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.dev-card-image{position:relative;overflow:hidden;height:250px}
.dev-card-image img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:grayscale(20%) brightness(0.85);transition:all 0.5s}
.dev-project-card:hover .dev-card-image img{filter:grayscale(0%) brightness(1.05);transform:scale(1.05)}
.dev-card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(66,33,112,0.85);display:flex;justify-content:center;align-items:center;opacity:0;transition:all 0.4s}
.dev-project-card:hover .dev-card-overlay{opacity:1}
.dev-card-link{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:#fff;text-transform:uppercase;letter-spacing:2px;padding:12px 24px;border:2px solid #f43c76;transition:all 0.3s}
.dev-card-link:hover{background:#f43c76;box-shadow:0 0 25px rgba(244,60,118,0.7)}
.dev-card-body{padding:20px}
.dev-card-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dev-card-badge{font-family:'JetBrains Mono',monospace;font-size:0.6rem;text-transform:uppercase;letter-spacing:1.5px;padding:4px 10px;border:1px solid rgba(244,60,118,0.2);background:rgba(244,60,118,0.08);color:#f43c76;text-decoration:none;transition:all 0.3s;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.dev-badge-category{background:rgba(244,60,118,0.12);border-color:rgba(244,60,118,0.3)}
.dev-badge-year{background:rgba(66,33,112,0.3);border-color:rgba(66,33,112,0.4);color:#bb99dd}
.dev-badge-tag{background:rgba(153,119,170,0.1);border-color:rgba(153,119,170,0.25);color:#9977aa;font-size:0.55rem;padding:3px 8px}
.dev-badge-link{background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.25);color:#10b981}
.dev-badge-link:hover{background:rgba(16,185,129,0.2);box-shadow:0 0 12px rgba(16,185,129,0.3)}
.dev-card-title{font-family:'Orbitron',sans-serif;font-size:1.2rem;color:#fff;margin-bottom:8px;font-weight:600}
.dev-card-desc{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#9977aa;line-height:1.5;margin-bottom:0}

.dev-load-more-wrapper{text-align:center;margin-top:40px}
.dev-load-more-btn{font-family:'JetBrains Mono',monospace;font-size:0.85rem;text-transform:uppercase;letter-spacing:2px;padding:14px 35px;background:transparent;border:1px solid rgba(244,60,118,0.4);color:#bb99dd;cursor:pointer;transition:all 0.3s;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.dev-load-more-btn:hover{background:rgba(244,60,118,0.15);border-color:#f43c76;color:#fff;box-shadow:0 0 30px rgba(244,60,118,0.4)}

.dev-cta-section{padding:60px;text-align:center;background:radial-gradient(circle at center,rgba(244,60,118,0.08) 0%,transparent 70%);border-top:1px solid rgba(244,60,118,0.12)}
.dev-cta-content{max-width:600px;margin:0 auto}
.dev-cta-title{font-family:'Orbitron',sans-serif;font-size:2rem;color:#fff;margin-bottom:15px;text-shadow:0 0 20px rgba(244,60,118,0.3)}
.dev-cta-text{font-family:'JetBrains Mono',monospace;font-size:0.9rem;color:#9977aa;margin-bottom:30px;line-height:1.6}

/* Модалка */
.dev-project-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.92);z-index:9999;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:all 0.3s}
.dev-project-modal.active{opacity:1;visibility:visible}
.dev-modal-content{background:rgba(12,7,28,0.98);border:1px solid rgba(244,60,118,0.4);max-width:1100px;width:95%;max-height:90vh;overflow-y:auto;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);position:relative;border-radius:28px;overflow:hidden}
.dev-modal-close{position:absolute;top:15px;right:20px;font-size:2.5rem;color:#9977aa;cursor:pointer;z-index:10;transition:0.3s;line-height:1}
.dev-modal-close:hover{color:#f43c76;transform:rotate(90deg)}
.dev-modal-body{padding:30px}
.dev-modal-title{font-family:'Orbitron',sans-serif;font-size:1.8rem;color:#fff;margin-bottom:12px}
.dev-modal-desc{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:#9977aa;line-height:1.7;margin-bottom:20px}

/* Превью iframe */
.dev-preview-tabs{display:flex;gap:0;padding:10px 20px;background:#0f172a}
.dev-preview-tab{font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;padding:8px 16px;border:none;background:transparent;color:#64748b;cursor:pointer;transition:all 0.3s}
.dev-preview-tab.active{background:#1e293b;color:#f43c76}
.dev-preview-frame-wrapper{position:relative;width:100%;height:500px;overflow:hidden;background:#0f172a}
.dev-preview-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:none}
.dev-preview-frame.active{display:block}
.dev-preview-frame.mobile{width:375px;left:50%;transform:translateX(-50%);border-left:1px solid #334155;border-right:1px solid #334155}

/* Форма в модалке */
.dev-order-btn{margin-top:10px}
.dev-inline-form{margin-top:20px;padding-top:20px;border-top:1px solid rgba(244,60,118,0.2)}
.dev-inline-form .form-group{margin-bottom:12px}
.dev-inline-form .form-group input{width:100%;padding:12px;background:rgba(10,5,25,0.8);border:1px solid rgba(244,60,118,0.3);color:#fff;font-family:'JetBrains Mono',monospace;outline:none}
.dev-inline-form .form-group input:focus{border-color:#f43c76}

@media(max-width:1100px){
.dev-hero{padding:60px 30px 40px}
.dev-title-line{font-size:3.5rem}
.dev-projects-grid{grid-template-columns:repeat(2,1fr)}
.dev-projects-section{padding:30px 30px 60px}
}
@media(max-width:768px){
.dev-hero{padding:40px 20px 30px}
.dev-title-line{font-size:2.5rem}
.dev-hero-subtitle{font-size:0.9rem}
.dev-filter-section{padding:25px 20px 10px}
.dev-filter-btn{font-size:0.7rem;padding:8px 14px}
.dev-projects-grid{grid-template-columns:1fr;gap:20px}
.dev-projects-section{padding:25px 20px 40px}
.dev-card-image{height:200px}
.dev-cta-section{padding:40px 20px}
.dev-cta-title{font-size:1.5rem}
.dev-modal-content{width:96%;max-height:92vh}
.dev-modal-body{padding:20px}
.dev-modal-title{font-size:1.3rem}
.dev-preview-frame-wrapper{height:300px}
.dev-preview-frame.mobile{width:100%;left:0;transform:none;border:none}
.dev-preview-tab{font-size:0.65rem;padding:6px 10px}
}
@media(max-width:400px){
.dev-title-line{font-size:2rem}
.dev-filter-btn{font-size:0.65rem;padding:6px 10px}
}
/* Галерея в модалке */
.dev-modal-gallery-wrapper {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: #0f172a;
}
.dev-modal-gallery-wrapper::-webkit-scrollbar {
    width: 6px;
}
.dev-modal-gallery-wrapper::-webkit-scrollbar-track {
    background: #1e293b;
}
.dev-modal-gallery-wrapper::-webkit-scrollbar-thumb {
    background: #f43c76;
    border-radius: 3px;
}
.dev-gallery-track {
    display: flex;
    flex-direction: column;
}
.dev-gallery-track img {
    width: 100%;
    display: block;
}
.dev-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 2rem;
    color: #fff;
    background: rgba(0,0,0,0.6);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s;
    line-height: 1;
    border: 1px solid rgba(255,255,255,0.2);
}
.dev-modal-close:hover {
    color: #f43c76;
    background: rgba(0,0,0,0.9);
    transform: rotate(90deg);
}
.dev-work-prev,
.dev-work-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(66,33,112,0.8);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.dev-work-prev { left: -60px; }
.dev-work-next { right: -60px; }
.dev-work-prev:hover,
.dev-work-next:hover {
    background: #f43c76;
    transform: translateY(-50%) scale(1.1);
}
.dev-project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.dev-project-modal.active {
    opacity: 1;
    visibility: visible;
}

.dev-work-prev,
.dev-work-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(244,60,118,0.8);
    color: #fff;
    border: none;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.dev-work-prev { left: 20px; }
.dev-work-next { right: 20px; }
.dev-work-prev:hover,
.dev-work-next:hover {
    background: #f43c76;
    transform: translateY(-50%) scale(1.1);
}

@media (max-width: 768px) {
    .dev-work-prev,
    .dev-work-next {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .dev-work-prev { left: 10px; }
    .dev-work-next { right: 10px; }
}
.dev-scroll-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 16px 32px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: 10;
    border: 1px solid rgba(244,60,118,0.5);
    border-radius: 4px;
    animation: hintFadeInOut 3s ease forwards;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
@keyframes hintFadeInOut {
    0% { opacity: 0; }
    15% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

.dev-modal-gallery-wrapper {
    position: relative;
}
.dev-gallery-track img {
    width: 100%;
    display: block;
    image-rendering: auto;
}
.dev-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: contrast(1.05) saturate(1.1) sharpen(0.5);
    transition: all 0.5s;
}
.dev-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: contrast(1.05) saturate(1.1) brightness(1.02);
    image-rendering: auto;
    transition: all 0.5s;
}
.dev-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 60%, rgba(6,2,16,0.4) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Корпоративный сайт */
.corp-section {
    padding: 70px 60px;
    border-bottom: 1px solid rgba(244,60,118,0.08);
}
.corp-section .section-title {
    text-align: left;
    margin-bottom: 35px;
    font-size: 2rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #fff;
    text-shadow: 0 0 15px rgba(244,60,118,0.4);
}
.corp-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 50px;
}
.corp-main-card {
    background: rgba(12,7,28,0.7);
    border: 1px solid rgba(244,60,118,0.15);
    padding: 40px 35px;
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    height: fit-content;
    position: sticky;
    top: 30px;
    transition: all 0.4s;
}
.corp-main-card:hover {
    border-color: rgba(244,60,118,0.35);
    box-shadow: 0 10px 40px rgba(244,60,118,0.1);
}
.corp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.corp-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
}
.corp-main-card > p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: #aabbcc;
    line-height: 1.8;
    margin-bottom: 30px;
}
.corp-order-btn {
    font-size: 0.9rem;
    padding: 16px 35px;
    width: 100%;
    text-align: center;
}

/* Блоки */
.corp-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.corp-block {
    background: rgba(12,7,28,0.4);
    border: 1px solid rgba(244,60,118,0.07);
    padding: 22px 26px;
    transition: all 0.35s ease;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.corp-block:hover {
    border-color: rgba(244,60,118,0.25);
    background: rgba(12,7,28,0.6);
    transform: translateX(6px);
    box-shadow: 0 5px 25px rgba(244,60,118,0.08);
}
.corp-block-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}
.corp-block ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 30px;
}
.corp-block li {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: #aabbcc;
    position: relative;
    padding-left: 14px;
    line-height: 1.6;
}
.corp-block li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #f43c76;
}
.dev-hero-title .dev-title-line:first-child {
    position: relative;
    cursor: default;
    transition: all 0.35s;
    width: fit-content;
    margin: 0 auto;
}
.dev-hero-title .dev-title-line:first-child::before,
.dev-hero-title .dev-title-line:first-child::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 5rem;
    font-weight: 800;
    color: #f43c76;
    opacity: 0;
    transition: opacity 0.35s;
    text-shadow: 0 0 18px rgba(244,60,118,0.9);
}
.dev-hero-title .dev-title-line:first-child::before {
    content: '[';
    left: -50px;
}
.dev-hero-title .dev-title-line:first-child::after {
    content: ']';
    right: -50px;
}
.dev-hero-title .dev-title-line:first-child:hover {
    color: #fff;
    text-shadow: 0 0 30px rgba(244,60,118,0.8);
}
.dev-hero-title .dev-title-line:first-child:hover::before,
.dev-hero-title .dev-title-line:first-child:hover::after {
    opacity: 1;
}

@media (max-width: 1100px) {
    .dev-hero-title .dev-title-line:first-child::before,
    .dev-hero-title .dev-title-line:first-child::after {
        font-size: 3.5rem;
    }
    .dev-hero-title .dev-title-line:first-child::before { left: -20px; }
    .dev-hero-title .dev-title-line:first-child::after { right: -20px; }
}
@media (max-width: 768px) {
    .dev-hero-title .dev-title-line:first-child::before,
    .dev-hero-title .dev-title-line:first-child::after {
        font-size: 2.5rem;
    }
    .dev-hero-title .dev-title-line:first-child::before { left: -14px; }
    .dev-hero-title .dev-title-line:first-child::after { right: -14px; }
}