/* =========================================================
   DCDozer — тёмная тема, спокойный инженерный стиль
   ========================================================= */

/* ---------- Переменные ---------- */
:root{
    --bg:           #0a0c10;      /* основной фон                  */
    --panel:        #11151b;      /* фон карточек                  */
    --panel-h:      #141922;      /* фон карточки при наведении    */
    --border:       #1c222c;      /* обычная граница               */
    --border-h:     #2a3542;      /* граница при наведении         */
    --text:         #dfe4ec;      /* основной текст                */
    --muted:        #808c9e;      /* приглушённый текст            */
    --dim:          #5a6473;      /* самый тихий текст             */
    --accent:       #4ea8de;      /* акцент                        */
    --accent-soft:  rgba(78,168,222,.10);
    --radius:       12px;

    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Сброс ---------- */
*,*::before,*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--accent);
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

/* ---------- Общая обёртка и секции ---------- */
.wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
}

section{
    scroll-margin-top:80px;   /* чтобы якорные ссылки не прятались под шапкой */
    padding:80px 0;
}

/* Класс для секций, у которых нужна линия сверху */
.bordered{
    border-top:1px solid var(--border);
}

/* ---------- Шапка ---------- */
header{
    padding:72px 0 56px;
    border-bottom:1px solid var(--border);
    background:radial-gradient(ellipse 70% 100% at 50% 0%, #121822 0%, transparent 70%);
}

.hero-inner{
    display:flex;
    gap:28px;
    align-items:center;
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
}

.avatar{
    width:96px;
    height:96px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--border-h);
    flex-shrink:0;
    background:#161b23;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-name{
    font-size:1.7rem;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.15;
    margin-bottom:6px;
}

.hero-name span{
    color:var(--accent);
}

.hero-role{
    color:var(--muted);
    font-size:.95rem;
    margin-bottom:18px;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* ---------- Переключатель языка ---------- */
.lang-switch{
    display:inline-flex;
    gap:4px;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    margin-top:14px;
}

.lang-switch a,
.lang-switch .active{
    padding:4px 10px;
    border-radius:6px;
    border:1px solid var(--border);
    text-decoration:none;
}

.lang-switch .active{
    color:var(--accent);
    border-color:rgba(78,168,222,.35);
    background:var(--accent-soft);
}

.lang-switch a{
    color:var(--muted);
}
.lang-switch a:hover{
    color:var(--text);
    border-color:var(--border-h);
}

/* ---------- Кнопки ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:8px;
    font-size:.88rem;
    font-weight:500;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .2s, border-color .2s, color .2s, transform .2s;
}

.btn-primary{
    background:var(--accent);
    color:#06111c;
    font-weight:600;
}
.btn-primary:hover{
    background:#6bb9e6;
    transform:translateY(-1px);
}

.btn-ghost{
    border-color:var(--border-h);
    color:var(--text);
}
.btn-ghost:hover{
    border-color:var(--accent);
    color:var(--accent);
}

/* ---------- Заголовки секций ---------- */
.sec-head{
    margin-bottom:34px;
}

.sec-head h2{
    font-size:1.45rem;
    font-weight:700;
    letter-spacing:-.02em;
    margin-bottom:6px;
}

.sec-head h2 span{
    color:var(--accent);
}

.sec-head p{
    color:var(--muted);
    font-size:.88rem;
}

/* ---------- Обо мне ---------- */
.about-grid{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:48px;
    align-items:start;
}

.about-text p{
    color:#b6bfcd;
    font-size:.95rem;
    margin-bottom:16px;
}
.about-text p:last-child{
    margin-bottom:0;
}

/* .hl — выделение имени, стажа, ключевых фраз */
.hl{
    color:var(--text);
    font-weight:600;
}

/* Боковая панель «Принципы работы» */
.side{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
}

.side h4{
    font-family:var(--mono);
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:14px;
}

.side ul{
    list-style:none;
}

.side li{
    font-size:.86rem;
    color:#b6bfcd;
    padding:9px 0 9px 18px;
    position:relative;
    border-bottom:1px solid var(--border);
}
.side li:last-child{
    border-bottom:none;
    padding-bottom:0;
}
.side li::before{
    content:'';
    position:absolute;
    left:0;
    top:17px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    opacity:.65;
}

/* ---------- Услуги ---------- */
.svc-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.svc{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 26px;
    transition:border-color .22s, background .22s, transform .22s;
}
.svc:hover{
    border-color:var(--border-h);
    background:var(--panel-h);
    transform:translateY(-2px);
}

.svc-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.svc-num{
    font-family:var(--mono);
    font-size:.72rem;
    color:var(--dim);
    letter-spacing:.06em;
}

.svc-ico{
    font-size:1.2rem;
    line-height:1;
}

.svc h3{
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:10px;
    line-height:1.4;
}

.svc p{
    font-size:.87rem;
    color:var(--muted);
}

/* Блок «срок / цена» внизу карточки */
.svc-meta{
    display:flex;
    gap:32px;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

.svc-meta .k{
    display:block;
    font-family:var(--mono);
    font-size:.66rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--dim);
    margin-bottom:3px;
}

.svc-meta .v{
    font-family:var(--mono);
    font-size:.83rem;
    color:var(--text);
}

/* ---------- Портфолио ---------- */
.pf-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.pf{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
    transition:border-color .22s, background .22s, transform .22s;
}
.pf:hover{
    border-color:var(--border-h);
    background:var(--panel-h);
    transform:translateY(-2px);
}

.tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:.67rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid rgba(78,168,222,.2);
    padding:3px 10px;
    border-radius:5px;
    margin-bottom:14px;
}

.pf h3{
    font-size:.98rem;
    font-weight:600;
    letter-spacing:-.01em;
    margin-bottom:10px;
    line-height:1.4;
}

.pf p{
    font-size:.86rem;
    color:var(--muted);
}

/* ---------- Контакты ---------- */
.contact-links{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:8px;
}

.contact-link{
    display:inline-flex;
    align-items:center;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px 26px;
    color:var(--text);
    font-size:.9rem;
    font-weight:500;
    transition:border-color .2s, transform .2s;
}
.contact-link:hover{
    border-color:var(--accent);
    color:var(--text);
    transform:translateY(-1px);
}

/* ---------- Футер ---------- */
footer{
    border-top:1px solid var(--border);
    padding:34px 0 26px;
    font-family:var(--mono);
    font-size:.75rem;
    color:var(--dim);
    letter-spacing:.03em;
}

.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    text-align:center;
}

.footer-links{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    justify-content:center;
}

.footer-link{
    color:var(--muted);
    font-size:.78rem;
    transition:color .2s;
}
.footer-link:hover{
    color:var(--accent);
}

.footer-copy{
    color:var(--dim);
}

/* ---------- Появление при скролле ---------- */
.reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{
    opacity:1;
    transform:none;
}

/* ---------- Адаптив ---------- */
@media (max-width:900px){
    .about-grid{
        grid-template-columns:1fr;
        gap:32px;
    }
    .svc-grid,
    .pf-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:600px){
    header{
        padding:52px 0 40px;
    }

    /* На узких экранах аватар уходит наверх, текст — по центру */
    .hero-inner{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }
    .hero-actions{
        justify-content:center;
    }
    .hero-name{
        font-size:1.4rem;
    }

    section{
        padding:60px 0;
    }

    .svc,
    .pf{
        padding:22px 20px;
    }
    .svc-meta{
        gap:22px;
    }

    .contact-links .contact-link{
        width:100%;
        justify-content:center;
    }
}