:root{
    --bg-blue:#5c30d8; /* фон хедера/интро/футера */
    --card-blue:#6941c6; /* карточки */
    --white:#fff;
    --text-dark:#141c3a;
    --text-light:#ffffff;
    --text-muted:#6b7280;
    --mint:#5BE9B9;
    --border:#e5e7eb;
    --radius:14px;
    --shadow:0 8px 24px rgba(0,0,0,.18);
    --icon-size:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6; color:var(--text-dark); background:var(--bg-blue)}
a{color:inherit}
.wrapper{max-width:960px; margin:0 auto; padding:24px}

/* Header */
header{
    position:sticky;
    top:12px;              /* небольшой отступ, чтобы капсула не прилипала к верху */
    z-index:1000;
    width:100%;
    background:transparent; /* убрали прямоугольный фон */
    backdrop-filter:none;   /* и блюр */
}
.header-inner{display:flex; justify-content:center; align-items:center}

/* Intro */
.intro{padding:clamp(48px,8vw,96px) 16px; text-align:center; color:var(--text-light)}
.intro h1{font-family:"Source Code Pro", monospace; font-weight:600; font-size:clamp(28px,6vw,48px); letter-spacing:.3px; margin:0 0 12px}
.intro p{max-width:680px; margin:0 auto; opacity:.95}

/* Projects */
#projects{background:var(--white); margin-top:-32px; border-top-left-radius:24px; border-top-right-radius:24px; padding:64px 0}
.projects-header{text-align:center; margin-bottom:24px}
.projects-header h2{font-family:"Source Code Pro", monospace; color:var(--text-dark); font-size:clamp(22px,4.5vw,36px); margin:0 0 6px}
.projects-header p{color:var(--text-muted)}

.projects-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); padding:0 24px; align-items:stretch}
.project-card{background:var(--text-dark); color:var(--white); border-radius:var(--radius); padding:20px; box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .18s ease, box-shadow .25s ease, filter .2s ease; display:flex; flex-direction:column; height:100%; min-height:320px}
/*.project-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); filter:brightness(0.97)}*/

.project-top{display:flex; gap:12px; align-items:center; margin-bottom:8px}
.glyph{width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.16); display:inline-flex; align-items:center; justify-content:center; font-size:20px; line-height:1}
.project-card h3{font-family:"Source Code Pro", monospace; font-size:18px; margin:0}
.project-card p{margin:0; opacity:.95}

/* Services */
#services{background:var(--bg-blue); margin-top:-32px; border-top-left-radius:24px; border-top-right-radius:24px; padding:64px 0}
#services .projects-header h2{color:var(--white)}
#services .projects-header p{color:var(--white)}

.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.35); background:transparent; color:var(--white); text-decoration:none; padding:8px 10px; border-radius:12px; font-size:14px}
.btn:hover{background:rgba(255,255,255,.08)}
.icon{inline-size:var(--icon-size); block-size:var(--icon-size); display:inline-block}

details.project-more {
    cursor: pointer;
    margin-top: auto;
    outline: 2px solid var(--mint);
    background: var(--text-dark);
    border-radius: 999px;
    padding: 12px 10px 10px 10px;
    display: flex;              /* Чтобы контейнер мог центрировать содержимое */
    justify-content: center;    /* Центрируем summary горизонтально */
}

details.project-more > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 350;
    color: white;
    font-size: 16px; /* как на твоём примере */
}

details.project-more:hover {
    background: var(--mint);
}

details.project-more:hover > summary {
    color: var(--text-dark);
}

details.project-more>summary::-webkit-details-marker{display:none}
.meta{margin:8px 0 0; padding:0 0 0 18px}
.meta li{margin:4px 0}

/* Experience */
#experience{background:var(--white); border-top-left-radius:24px; border-top-right-radius:24px; padding:64px 0}
.exp-header{text-align:center; margin-bottom:24px}
.exp-header h2{font-family:"Source Code Pro", monospace; color:var(--text-dark); font-size:clamp(22px,4.5vw,36px); margin:0}
.exp-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); padding:0 24px}
.exp-card{border:1px solid var(--border); border-radius:var(--radius); padding:18px 14px; text-align:center}
.exp-icon{width:56px; height:56px; border-radius:50%; background:var(--mint); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:24px}
.exp-card h3{font-family:"Source Code Pro", monospace; color:var(--text-dark); margin:0 0 4px}
.exp-card p{color:var(--text-muted); margin:0}

/* Contact */
#contact{color:var(--text-light); text-align:center; padding:40px 0}
#contact a{color:var(--mint); text-decoration:none}

/* Footer — в духе mattfarley.ca */
footer{
    position:relative;
    color:var(--text-light);
    padding:36px 0 40px;
    background:transparent;
}
footer::before{
    content:"";
    position:absolute; left:0; right:0; top:-24px; bottom:0;
    background: var(--bg-blue);              /* твой фирменный пурпурный */
    border-top-left-radius:24px;
    border-top-right-radius:24px;
    z-index:0;
}
.footer-inner{
    position:relative; z-index:1;
    max-width:960px; margin:0 auto; padding:0 24px;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    text-align:center;
}

/* Лого в футере */
.footer-logo{width:60px; height:auto; display:block; margin:8px auto 4px}

/* Тихая подпись над иконками (опционально) */
.footer-tagline{
    margin:4px 0 4px; font-size:clamp(16px, 2.5vw, 20px);
    opacity:.9;
}

/* Соц-иконки — круглые «пилюли» */
.footer-social{
    list-style:none; padding:0; margin:10px 0 6px;
    display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
}
.footer-social .pill{
    width:56px; height:56px; border-radius:9999px;
    display:inline-grid; place-items:center;
    border:2px solid var(--mint);
    background:var(--bg-blue); color:#fff; /* иконки белые */
    text-decoration:none;
    transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.footer-social .pill:hover{
    transform:translateY(-2px);
    background:var(--mint);
}
.footer-social .pill:focus-visible{
    outline:3px solid var(--mint); outline-offset:3px;
}
.footer-social svg{inline-size:22px; block-size:22px; display:block}

/* Копирайт */
.copy{opacity:.8; font-size:14px; margin-top:6px}

/* Мобилка: немного компактнее */
@media (max-width: 480px){
    .footer-social{gap:14px}
    .footer-social .pill{width:52px; height:52px}
    .footer-social svg{inline-size:20px; block-size:20px}
}

/* Hover/focus accessibility */
.btn:hover,.btn:focus-visible{background:rgba(0,0,0,.12); border-color:rgba(255,255,255,.5); outline:none}
nav a:focus-visible,.project-more>summary:focus-visible,.btn:focus-visible{outline:3px solid rgba(0,0,0,.35); outline-offset:2px}

/* Clamp descriptions for equal height */
.project-card>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Footer icon sizing */
.social .icon{inline-size:18px; block-size:18px}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:2000; display:flex; align-items:flex-start; justify-content:center; padding:24px}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-dialog{position:relative; max-width:720px; width:min(92vw,720px); margin-top:6vh; background:#fff; color:#111827; border-radius:16px; padding:20px 18px; box-shadow:0 24px 64px rgba(0,0,0,.35)}
.modal-title{font-family:"Source Code Pro", monospace; margin:0 0 10px; color:var(--bg-blue)}
.modal-close{position:absolute; right:10px; top:10px; background:transparent; border:0; font-size:22px; line-height:1; cursor:pointer}

/* Доп. мобильные правки */
@media (max-width:768px){
    .social{flex-direction:column; align-items:center; gap:12px}
    details.project-more{margin-top:12px}
}
.intro{padding:56px 12px}
.projects-grid{padding:0 12px}
.exp-grid{padding:0 12px}
.glyph{width:36px; height:36px}

@media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
}

/* Mobile overrides: footer stacked contacts + project card bottom-aligned details */
@media (max-width:768px){
    .social{flex-direction:column !important; align-items:center !important; gap:12px; text-align:center}
    .social li{display:flex; justify-content:center; width:100%}
    .project-card{min-height:340px}
    .project-card .actions{margin-bottom:12px}
    details.project-more{margin-top:auto}
}

/* Лого над H1 */
.brand-logo{width:82px; height:auto; display:block; margin:0 auto 12px}

/* =========================
   NAV v2 — ДЕСКТОП (чипсы в капсуле + индикатор)
   ========================= */
/* ===== NAV v2 — ДЕСКТОП (капсула + индикатор) ===== */
@media (min-width: 769px) {
    header nav ul{
        list-style:none;
        display:flex; align-items:center; justify-content:center;
        gap:6px; padding:6px; margin:0;
        /* стекло и посветлее фон */
        background: rgba(255,255,255,0.18);
        backdrop-filter: saturate(160%) blur(12px);
        border: 1px solid rgba(255,255,255,0.14);

        border-radius: 999px;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,.20); /* лёгкая тень, чтобы «висел» */
    }
    header nav a{
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight: 600; color: var(--text-dark);
        text-decoration: none;
        padding: 10px 14px; border-radius: 999px;
        transition: background .2s ease;
    }
    header nav a:hover,
    header nav a:focus-visible{ background: rgba(255,255,255,0.06); outline: none; }
    header nav a.active{ color: var(--mint) }
    header nav ul .nav-indicator{
        position:absolute; top:6px; left: 6px;
        height:calc(100% - 12px); width:0; border-radius:999px;
        background:rgba(255,255,255,0.16);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
        transition:transform .25s ease, width .25s ease;
        will-change:transform,width; pointer-events:none;
    }
}

/* =========================
   NAV v2 — МОБИЛКА (нижняя tab-bar)
   ========================= */
.tabbar{display:none}
@media (max-width: 768px){
    header { display:none } /* верхнее меню скрываем на мобилке */

    /* чуть больше отступа снизу, чтобы tabbar не перекрывал контент */
    body{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    .tabbar{
        display:grid;
        position:fixed; left:12px; right:12px; bottom:12px;
        /* стекло и посветлее фон */
        background: rgba(255,255,255,0.18);
        backdrop-filter: saturate(160%) blur(12px);
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: 999px;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);

        grid-template-columns: repeat(4, 1fr);
        min-height:56px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        z-index:1001;
    }
    .tabbar a{
        display:grid; grid-template-rows:1fr auto; place-items:center; gap:2px;
        text-decoration:none; color:var(--mint);
        font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-weight:600; font-size:11px; opacity:.95;
    }
    .tabbar a .ico{ width:20px; height:20px }
    .tabbar a.active{ opacity:1 }
}