/* ===== ABOUT — NEW SKIN ===== */

/* SEKCJE */
.section {
    padding: clamp(48px, 7vw, 96px) 0;
}

.section-head {
    margin-bottom: 18px;
}

.mb-16 {
    margin-bottom: 16px;
}

/* ---------- HERO SPLIT ---------- */
.hero--split {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 6vw, 92px);
    background: radial-gradient(1200px 500px at 10% 0%, rgba(214,180,108,.12), transparent 60%), radial-gradient(1200px 600px at 100% 100%, rgba(124,93,250,.12), transparent 60%), linear-gradient(180deg, #0b0e13, #0d1117);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .hero--split .hero-bgshape {
        position: absolute;
        inset: -20% -5% auto auto;
        width: 780px;
        height: 780px;
        border-radius: 50%;
        background: conic-gradient(from 120deg, rgba(214,180,108,.16), rgba(124,93,250,.16), rgba(214,180,108,.16));
        filter: blur(40px);
        opacity: .35;
        pointer-events: none;
    }

.hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 560px) minmax(300px, 560px);
    align-items: center;
    gap: clamp(20px, 3.5vw, 48px);
}

@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

.hero-kicker {
    display: inline-block;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: .8rem;
    padding: .34rem .72rem;
    border-radius: 999px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #dfe3ee;
}

.hero-headline {
    font-family: Fraunces, ui-serif;
    line-height: 1.05;
    font-size: clamp(2rem, 5.6vw, 3.6rem);
    margin: 4px 0 10px;
}

    .hero-headline em {
        color: var(--gold, #d6b46c);
        font-style: normal;
    }

.hero-desc {
    color: var(--muted, #9aa4b2);
    max-width: 62ch;
}

.hero-actions {
    margin-top: 16px;
}

.hero-chips {
    margin-top: 14px;
}

.hero-right .media-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)), radial-gradient(120% 120% at 0% 0%, rgba(214,180,108,.10), transparent 60%), #0e131a;
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
    aspect-ratio: 16/10;
}





/* sekcja nie jest już pełnoekranowym hero z .hero ze style.css */
.hero.hero--about {
    min-height: auto;
    display: block;
    padding: calc(var(--navH) + clamp(24px, 4vw, 40px)) 0 clamp(120px, 18vh, 220px);
    background: radial-gradient(150% 220% at 0% 0%, rgba(214,180,108,0.22), transparent 60%), radial-gradient(120% 180% at 100% 0%, rgba(214,180,108,0.10), transparent 55%), linear-gradient(180deg, #0b0e13, #0c1017);
}



/* główny panel w środku sekcji */
.hero--about .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(260px, 0.9fr);
    align-items: center;
    gap: clamp(28px, 4vw, 60px);
    /* już nie robimy z tego boxa – tylko layout */
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}


    /* delikatna poświata w panelu */
    .hero--about .hero-grid::before {
        content: "";
        position: absolute;
        inset: -40% -10% auto auto;
        background: radial-gradient(60% 60% at 0% 0%, rgba(214,180,108,0.45), transparent 70%);
        opacity: 0.55;
        mix-blend-mode: screen;
        pointer-events: none;
    }

/* LEWA STRONA – tekst */
.hero--about .hero-left {
    position: relative;
    z-index: 1;
}

.hero--about .hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold, #d6b46c);
    background: rgba(214,180,108,0.12);
    border: 1px solid rgba(214,180,108,0.35);
}

.hero--about .hero-headline {
    margin-top: 16px;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.05;
}

    .hero--about .hero-headline span {
        display: block;
    }

    .hero--about .hero-headline em {
        font-style: normal;
        display: block;
        background: linear-gradient(120deg, #f9e4b0, var(--gold, #d6b46c) );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

.hero--about .hero-desc {
    margin-top: 14px;
    max-width: 34rem;
    color: var(--muted, #9aa4b2);
}

.hero--about .hero-actions {
    margin-top: 22px;
}

.hero--about .hero-chips {
    margin-top: 16px;
}

/* PRAWA STRONA – okrągłe zdjęcie z „orbitą” */
.hero--about .hero-right {
    position: relative;
    z-index: 1;
    justify-self: center;
}

    .hero--about .hero-right .media-frame {
        position: relative;
        width: clamp(260px, 32vw, 360px);
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        padding: 6px;
        background: radial-gradient(circle at 30% 0%, rgba(214,180,108,0.55), transparent 60%), radial-gradient(circle at 80% 100%, rgba(214,180,108,0.35), transparent 65%), #05070b;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.1);
        overflow: visible;
    }

        /* wewnętrzny krąg */
        .hero--about .hero-right .media-frame::before {
            content: "";
            position: absolute;
            inset: 10%;
            border-radius: 50%;
            border: 1px solid rgba(214,180,108,0.55);
            opacity: 0.6;
        }

        /* delikatna poświata */
        .hero--about .hero-right .media-frame::after {
            content: "";
            position: absolute;
            inset: -18%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(214,180,108,0.18), transparent 70%);
            opacity: 0.7;
            filter: blur(6px);
            pointer-events: none;
        }

    .hero--about .hero-right img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

/* MOBILE / TABLET */
@media (max-width: 980px) {
    .hero.hero--about {
        padding: calc(var(--navH) + 20px) 0 40px;
    }

    .hero--about .hero-grid {
        grid-template-columns: 1fr;
        padding: 22px 18px 26px;
        border-radius: 22px;
        gap: 22px;
    }

    .hero--about .hero-right {
        order: -1; /* zdjęcie na górze */
    }

    .hero--about .hero-headline {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    .hero--about .hero-desc {
        max-width: 100%;
    }
}













/* Większa wysokość hero na desktopie */
@media (min-width: 1024px) {
    .hero--split {
        /* było: padding-bottom: clamp(48px, 6vw, 92px); */
        padding-bottom: clamp(96px, 12vh, 140px);
    }
}

/* Koniec Hero */


.media-frame::after {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: conic-gradient(from 120deg, rgba(214,180,108,.18), rgba(124,93,250,.18), rgba(214,180,108,.18));
    filter: blur(30px);
    opacity: .35;
    pointer-events: none;
}

.media-frame img, .media-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- ABOUT INTRO PRO CARD ---------- */
.about-pro {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: clamp(18px, 3vw, 32px);
    border-radius: 20px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%), radial-gradient(900px 420px at 0% 0%, rgba(214,180,108,.08), transparent 60%), radial-gradient(900px 420px at 100% 100%, rgba(124,93,250,.08), transparent 60%), #0f131a;
}

@media (max-width: 980px) {
    .about-pro {
        grid-template-columns: 1fr;
    }
}

.about-pro-media img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 58px rgba(0,0,0,.45);
}

.tick-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
    color: var(--muted, #9aa4b2);
}

    .tick-list li {
        position: relative;
        padding-left: 22px;
    }

        .tick-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .6rem;
            width: 10px;
            height: 10px;
            border-radius: 3px;
            background: linear-gradient(180deg, var(--gold, #d6b46c), var(--accent, #7c5dfa));
        }

/* ---------- TIMELINE (VERTICAL) ---------- */
.timeline.skin-v {
    position: relative;
}

.tl {
    position: relative;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

    .tl::before {
        content: "";
        position: absolute;
        left: 18px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
    }

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

    .tl-item:last-child {
        margin-bottom: 0;
    }

.tl-dot {
    position: absolute;
    left: 11px;
    top: .9rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold, #d6b46c), var(--accent, #7c5dfa));
    box-shadow: 0 0 0 4px rgba(214,180,108,.12);
}

.tl-time {
    font-weight: 800;
    color: #dfe3ee;
}

.tl-card {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
    transition: transform .25s ease, box-shadow .25s ease;
}

    .tl-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px rgba(0,0,0,.35);
    }

/* ---------- FEATURE CARDS (product-like) ---------- */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(14px, 2.2vw, 22px);
}

@media (max-width: 900px) {
    .cards-3 {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    position: relative;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(700px 320px at 0% 0%, rgba(214,180,108,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .feature-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 50px rgba(0,0,0,.4);
        border-color: rgba(255,255,255,.14);
    }

.card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .24rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #dfe3ee;
}

/* ---------- VALUES WRAP ---------- */
.values-wrap {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(16px, 2.6vw, 28px);
    align-items: start;
}

@media (max-width: 980px) {
    .values-wrap {
        grid-template-columns: 1fr;
    }
}

.values-media img, .values-media video {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    box-shadow: 0 18px 58px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.08);
}

/* ---------- GALLERY ---------- */
.gallery-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(12px, 2vw, 18px);
}

@media (max-width: 900px) {
    .gallery-3 {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

    .gallery-item img, .gallery-item video {
        display: block;
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

/* ---------- CHIPS / PILLS (lekki polish) ---------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    border-radius: 999px;
    padding: .36rem .7rem;
    font-weight: 700;
    font-size: .86rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #dfe3ee;
}











/* === FOCUS (Na czym się teraz skupiam) === */
.focus-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px);
}
@media (max-width: 900px){ .focus-grid{ grid-template-columns:1fr; } }

.focus-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:18px;
  background:
    radial-gradient(600px 260px at 0% 0%, rgba(214,180,108,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.focus-card:hover{ transform: translateY(-2px); box-shadow:0 18px 44px rgba(0,0,0,.45); border-color: rgba(255,255,255,.16); }

.focus-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.focus-icon{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.focus-icon svg{ width:22px; height:22px; }
.mini-list{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.mini-list li{ margin:4px 0; }

/* === HOBBIES (karty + kolaż) === */
.hobby-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(14px, 2.4vw, 26px);
  align-items:start;
}
@media (max-width: 980px){ .hobby-wrap{ grid-template-columns:1fr; } }

.hobby-cards{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;
}
@media (max-width: 560px){ .hobby-cards{ grid-template-columns:1fr; } }

.hobby-card{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hobby-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.hobby-ico{
  width:28px; height:28px; display:grid; place-items:center; border-radius:10px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.hobby-card h3{ margin:0; }

.hobby-collage{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.hobby-collage .tile{
  border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.hobby-collage .tile img, .hobby-collage .tile video{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 16/10;
}
.hobby-collage .tile.tall img{ aspect-ratio: 3/4; }
.hobby-collage .tile.wide img{ aspect-ratio: 21/9; }

/* === MILESTONES (kompakt) === */
.milestone-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px); margin-top: 10px;
}
@media (max-width: 1100px){ .milestone-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 780px){ .milestone-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .milestone-grid{ grid-template-columns: 1fr;} }

.milestone{
  border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  min-height: 140px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.milestone:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.16); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.ms-year{
  display:inline-block; font-weight:800; letter-spacing:.04em; font-size:.85rem;
  padding:.26rem .6rem; border-radius:999px; margin-bottom:8px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#dfe3ee;
}




/* ===== HOBBIES: TABS LAYOUT (bez JS) ===== */
.tabs-hobbies .hobby-tabs{
  display:grid; grid-template-columns: minmax(320px,1.1fr) 360px;
  gap: clamp(14px, 2.4vw, 28px); align-items: start;
}
@media (max-width: 980px){
  .tabs-hobbies .hobby-tabs{ grid-template-columns: 1fr; }
}

/* ukryj radio */
.tabs-hobbies .hobby-tabs > input{ position:absolute; opacity:0; pointer-events:none; }

/* PREVIEW PANELS */
.tabs-hobbies .panels{ position:relative; }
.tabs-hobbies .panel{
  display:none; border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.tabs-hobbies .panel-media{ position:relative; }
.tabs-hobbies .panel-media img,
.tabs-hobbies .panel-media video{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 16/9; }
.tabs-hobbies .shine{ position:absolute; inset:auto -30% 0 auto; width: 340px; height: 340px; border-radius:50%;
  background: conic-gradient(from 140deg, rgba(214,180,108,.16), rgba(124,93,250,.16), rgba(214,180,108,.16));
  filter: blur(28px); opacity:.35; pointer-events:none;
}
.tabs-hobbies .panel-copy{ padding:14px 16px 18px; }

/* MENU (RIGHT COLUMN) */
.tabs-hobbies .hobby-menu{
  display:grid; gap:10px;
  position: relative;
}
.tabs-hobbies .tab{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px 14px;
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(214,180,108,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  cursor:pointer; user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.tabs-hobbies .tab .ico{
  width:28px; height:28px; display:grid; place-items:center; border-radius:10px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.tabs-hobbies .tab:hover{
  transform: translateY(-2px); border-color: rgba(255,255,255,.16);
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
}

/* STANY: pokaż właściwy panel, podświetl aktywną kartę */
#hb1:checked ~ .panels #p1,
#hb2:checked ~ .panels #p2,
#hb3:checked ~ .panels #p3,
#hb4:checked ~ .panels #p4,
#hb5:checked ~ .panels #p5,
#hb6:checked ~ .panels #p6,
#hb7:checked ~ .panels #p7,
#hb8:checked ~ .panels #p8{ display:block; }

#hb1:checked ~ .hobby-menu label[for="hb1"],
#hb2:checked ~ .hobby-menu label[for="hb2"],
#hb3:checked ~ .hobby-menu label[for="hb3"],
#hb4:checked ~ .hobby-menu label[for="hb4"],
#hb5:checked ~ .hobby-menu label[for="hb5"],
#hb6:checked ~ .hobby-menu label[for="hb6"],
#hb7:checked ~ .hobby-menu label[for="hb7"],
#hb8:checked ~ .hobby-menu label[for="hb8"]{
  outline: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(214,180,108,.11), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

/* MOBILE: zamień na akordeon (kolumna jedna) */
@media (max-width: 980px){
  .tabs-hobbies .hobby-menu{ order:-1; }
  /* opcjonalnie zmniejsz podgląd */
  .tabs-hobbies .panel-media img, .tabs-hobbies .panel-media video{ aspect-ratio: 16/10; }
}








/* === ROADMAP — stable scroll + mobile fix === */
/* === ROADMAP – desktop: linia pośrodku, dymki góra/dół; mobile: lista === */
.section.roadmap,
.section.roadmap .container {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.roadmap {
    padding: 130px 0 170px;
    background: radial-gradient(70% 90% at 15% 0%, rgba(124,93,250,.14), transparent 55%), radial-gradient(60% 80% at 85% 10%, rgba(6,182,212,.12), transparent 60%), linear-gradient(180deg,#0b0e13,#0c1017);
    border-top: 1px solid rgba(255,255,255,.06);
}

    .roadmap .lead {
        color: var(--muted);
    }

/* ================= DESKTOP / TABLET (≥ 821px) ================= */
@media (min-width:821px) {
    .roadmap-scroller {
        --gap: 24px;
        --padX: 84px;
        --cols: 4; /* 4 elementy w jednym kadrze */
        --node: 56px; /* rozmiar węzła / ikonki */
        margin-top: 32px;
        overflow-x: hidden;
        overflow-y: visible;
        position: relative;
    }

    /* linia z gradientem – dokładnie w środku wysokości toru */
    .rm-line {
        position: absolute;
        left: var(--padX);
        right: var(--padX);
        top: 50%;
        transform: translateY(-50%);
        height: 12px;
        border-radius: 999px;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(90deg,#d6b46c 0%,#7c5dfa 100%);
        background-size: 300% 100%;
        background-position-x: var(--linePos,0%);
        box-shadow: 0 12px 40px rgba(124,93,250,.35);
    }

        .rm-line::before {
            content: "";
            position: absolute;
            inset: -12px;
            border-radius: 999px;
            filter: blur(14px);
            background: linear-gradient(90deg,rgba(214,180,108,.28),rgba(124,93,250,.28));
            background-size: 300% 100%;
            background-position-x: var(--linePos,0%);
        }

    /* tor – tak żeby 50% wysokości było prawdziwym środkiem między dymkami */
    .roadmap-track {
        display: grid;
        grid-auto-flow: column;
        gap: var(--gap);
        grid-auto-columns: minmax(260px,calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols)));
        padding: 140px var(--padX);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

        .roadmap-track::-webkit-scrollbar {
            display: none;
        }

    .rm-item {
        position: relative;
        display: grid;
        place-items: center; /* node dokładnie na linii */
        scroll-snap-align: center;
        z-index: 2;
    }

        .rm-item::before {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #e5e7eb;
            top: calc(50% - 4.5px); /* siedzi na linii */
        }

    /* węzeł + ikonka */
    .rm-node {
        width: var(--node);
        height: var(--node);
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(14,18,26,.9);
        border: 1px solid rgba(255,255,255,.16);
        box-shadow: 0 14px 30px rgba(0,0,0,.55);
        backdrop-filter: blur(6px);
        z-index: 3;
    }

        .rm-node svg {
            width: 22px;
            height: 22px;
            opacity: .95;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
        }

    /* etykiety czasu nad node */
    .rm-meta {
        position: absolute;
        top: -44px;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 800;
        letter-spacing: .14em;
        color: #e8edf5;
        font-size: .74rem;
        text-shadow: 0 2px 10px rgba(0,0,0,.55);
        z-index: 5;
        pointer-events: none;
    }

    /* dymki */
    .rm-card {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(260px,26vw,380px);
        background: rgba(8,10,15,.9);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 20px;
        padding: 16px 18px;
        box-shadow: 0 26px 56px rgba(0,0,0,.6);
        backdrop-filter: blur(10px);
        z-index: 4;
    }

        .rm-card h3 {
            margin: 0 0 6px;
            font-weight: 800;
            color: #fff;
            font-size: 1.1rem;
        }

        .rm-card p {
            margin: 0;
            color: #c7cfdd;
            font-size: .95rem;
        }

    /* naprzemiennie NAD i POD osią – jak na Twoim screenie */
    .rm-item:nth-child(odd) .rm-card {
        bottom: calc(50% + 80px);
    }
    /* 1,3,5... góra */
    .rm-item:nth-child(even) .rm-card {
        top: calc(50% + 80px);
    }
    /* 2,4,6... dół  */

    .rm-card::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 12px;
        height: 12px;
        border-radius: 4px;
        background: inherit;
        border: inherit;
        transform: translateX(-50%) rotate(45deg);
    }

    .rm-item:nth-child(odd) .rm-card::before {
        bottom: -7px;
    }

    .rm-item:nth-child(even) .rm-card::before {
        top: -7px;
    }

    /* strzałki slidera */
    .rm-hbtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 46px;
        height: 46px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(16,19,26,.92);
        color: #fff;
        border: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 14px 40px rgba(0,0,0,.55);
        z-index: 10;
        cursor: pointer;
    }

        .rm-hbtn.prev {
            left: 24px;
        }

        .rm-hbtn.next {
            right: 24px;
        }

    /* przycisk mobilny chowamy na desktopie */
    .rm-more {
        display: none !important;
    }
}

/* ================= MOBILE (≤ 820px) – zostawiamy układ listy + "Pokaż więcej" ================= */
@media (max-width:820px) {
    .roadmap {
        padding: 96px 0;
    }

    .rm-line,
    .rm-hbtn {
        display: none;
    }

    .roadmap-track {
        display: block;
        padding: 0 20px 24px;
        overflow: visible;
    }

    .rm-item {
        display: grid;
        grid-template-columns: 66px 1fr;
        align-items: start;
        gap: 14px;
        margin: 24px 0;
        position: relative;
    }

        .rm-item::before {
            display: none;
        }

    .rm-node {
        width: 62px;
        height: 62px;
    }

    .rm-meta {
        position: static;
        transform: none;
        margin: 0 0 4px;
        order: -1;
        grid-column: 2 / -1;
        color: #9ba4b5;
        text-shadow: none;
    }

    .rm-card {
        position: static;
        transform: none;
        width: auto;
        padding: 14px 16px;
        box-shadow: 0 20px 40px rgba(0,0,0,.55);
    }

        .rm-card::before {
            display: none;
        }

    /* domyślnie 6 elementów, reszta po kliknięciu */
    .roadmap-track:not(.expanded) .rm-item:nth-child(n+7) {
        display: none;
    }

    .rm-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 8px 20px 0;
        padding: 10px 16px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.18);
        background: transparent;
        color: #fff;
        font-size: .9rem;
        font-weight: 700;
        cursor: pointer;
    }
}

/* Więcej przestrzeni w pionie na dużych ekranach – żeby nic nie było ucięte */
@media (min-width: 821px) {
    .roadmap {
        padding-bottom: 230px; /* możesz podbić np. do 250px, jeśli chcesz jeszcze więcej luzu */
    }
}


/* Większa wysokość toru na dużych ekranach, żeby dymki się nie ucinały */
@media (min-width: 821px) {
    .roadmap-track,
    .roadmap-track.expanded {
        min-height: 520px; /* w razie potrzeby możesz podbić np. do 560px */
    }
}


@media (min-width:821px) {
    /* etykiety czasu naprzemiennie, zaczynając OD DOŁU */
    .rm-item:nth-child(odd) .rm-meta {
        top: auto;
        bottom: -44px; /* 1.,3.,5... pod osią */
    }

    .rm-item:nth-child(even) .rm-meta {
        top: -44px; /* 2.,4.,6... nad osią */
        bottom: auto;
    }
}


.logo-slot img{
    width:80%;
}
.logo-slot {
    height: 15vh;
}

@media (max-width:900px) {
    /* etykiety czasu naprzemiennie, zaczynając OD DOŁU */
    .logo-slot img {
        width: 30vh;
    }

    .logo-slot {
        height: 15vh;
    }

    .hero-left {
        margin-top: 5vh;
    }
}

.about-me-from-me {
    color: #9aa4b2;
}


/* Płynne przejścia między sekcjami na stronie O mnie */

.values.section {
    background: 
    radial-gradient(70% 90% at 15% 100%, rgba(124,93,250,0.14), transparent 55%),
    radial-gradient(60% 80% at 85% 100%, rgba(6,182,212,0.12), transparent 60%),
    linear-gradient(180deg, #0c1017 0%, #0b0e13 100%);
}


.section.roadmap {
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(124,93,250,0.14), transparent 55%),
    radial-gradient(60% 80% at 85% 10%, rgba(6,182,212,0.12), transparent 60%),
    linear-gradient(180deg, #0c121a, #0c141e);
}

.section.hobbies {
  background: linear-gradient(180deg, #0c141e, #0b1018);
}

.section.focus {
  background: linear-gradient(180deg, #0b1018, #090d13);
}

.section.community {
  background: linear-gradient(180deg, #090d13, #070a10);
}


/* Płynny, wspólny gradient przez wszystkie sekcje strony ABOUT */

/* 2. "Zaangażowanie akademickie" – płynne wyjście z "Mojej drogi" */
.community.section {
    background: linear-gradient(180deg, #0c141e 0%, #0b1017 100%);
}

/* 3. "Na czym się teraz skupiam" – delikatny glow + dalsze przyciemnienie */
.section.focus.section--softA {
    background: radial-gradient(80% 120% at 85% 100%, rgba(6,182,212,0.14), transparent 60%), linear-gradient(180deg, #080f18 0%, #060a11 100%);
}

/* 4. "Po godzinach" – przejście w dół strony */
.section.hobbies {
    background: radial-gradient(80% 120% at 85% 0%, rgba(6,182,212,0.14), transparent 60%), linear-gradient(180deg, #080f18 0%, #060a11 100%);
}





/* === LINK W OSI CZASU (ZOBACZ WIĘCEJ) === */
.msc-link{
    margin-left: 4px;
    color: var(--gold);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(214,180,108,.75);
    cursor: pointer;
}
.msc-link:hover{
    color: #fff;
    border-bottom-color: transparent;
}

/* === MODAL: Osiągnięcia – Magister inżynier ===================== */
/* Overlay + dialog */

.msc-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    background:
        radial-gradient(circle at top left, rgba(88, 28, 135, 0.35), transparent 55%),
        radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.25), transparent 55%),
        rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* klasa nadawana z JS przy otwarciu */
.msc-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.msc-modal-dialog {
    width: 100%;
    max-width: min(1320px, 100% - 64px);
    background: radial-gradient(circle at top left, #111827, #020617 65%);
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    padding: 24px 24px 28px;
    position: relative;
    color: #f9fafb;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* === Nagłówek =================================================== */

.msc-modal-header {
    position: relative;
    padding-right: 44px; /* miejsce na X */
    margin-bottom: 20px;
}

.msc-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #4c1d95, #a855f7);
    color: #f9fafb;
    margin-bottom: 10px;
}

.msc-modal-header h2 {
    font-size: 1.9rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 10px;
}

.msc-modal-sub {
    margin: 0;
    font-size: 0.95rem;
    color: #9ca3af;
}

/* X */

.msc-modal-close {
    position: absolute;
    top: 6px;
    right: 4px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.95);
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.12s ease,
        border-color 0.18s ease;
}

.msc-modal-close:hover {
    background: rgba(30, 64, 175, 0.85);
    border-color: rgba(129, 140, 248, 0.9);
    transform: scale(1.05);
}

/* === Layout: galeria + linki ==================================== */

.msc-modal-layout {
    display: flex;
    gap: 32px;
    margin-top: 20px;
}

.msc-modal-body {
    flex: 1 1 0;
    min-width: 0;
}

.msc-modal-aside {
    flex: 0 0 340px;
    max-width: 360px;
}

/* === Linki po prawej ============================================ */

.msc-links h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
}

.msc-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msc-links li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.msc-links li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
}

.msc-links a {
    color: #e5e7eb;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.msc-links a:hover {
    color: #f9a8d4;
    border-color: rgba(248, 113, 113, 0.7);
}

/* === GALERIA – slider (używana na wszystkich szerokościach) ===== */

.msc-gallery {
    margin-bottom: 18px;
}

/* używamy wersji desktopowej jako głównej */
.msc-gallery--desktop {
    display: block;
}

/* wersję mobile-grid chowamy wszędzie (HTML może zostać) */
.msc-gallery--mobile {
    display: none !important;
}

/* główne zdjęcie */

.msc-gallery-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(circle at top left, #111827, #020617);
    border: 1px solid rgba(148, 163, 184, 0.2);
    aspect-ratio: 16 / 9; /* desktop: szerokie foto */
}

.msc-gallery-main-frame {
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.msc-gallery-main-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* strzałki */

.msc-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
    cursor: pointer;
    transition:
        background 0.18s ease,
        transform 0.12s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.msc-gallery-arrow--prev {
    left: 10px;
}
.msc-gallery-arrow--next {
    right: 10px;
}

.msc-gallery-arrow:hover {
    background: radial-gradient(circle at top left, #4c1d95, #1e293b);
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow:
        0 0 0 1px rgba(79, 70, 229, 0.7),
        0 10px 25px rgba(15, 23, 42, 0.9);
    transform: translateY(-50%) scale(1.05);
}

/* miniatury */

.msc-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.msc-thumb {
    position: relative;
    width: 110px;
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 0;
    cursor: pointer;
    background: #020617;
    transition:
        transform 0.12s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.msc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msc-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.45), transparent 55%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.msc-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.85);
    border-color: rgba(129, 140, 248, 0.8);
}

.msc-thumb.is-active {
    border-color: #a855f7;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.45);
}

.msc-thumb.is-active::after {
    opacity: 1;
}

/* === „Stara” wersja kafelkowa – gdybyś chciał użyć ręcznie ====== */

.msc-gallery-item {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: radial-gradient(circle at top left, #111827, #020617);
}

.msc-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ===============================================================
   RESPONSYWNOŚĆ – BEZ ZMIAN NA DUŻYCH EKRANACH
   =============================================================== */

/* TABLETY / MAŁE LAPTOPY: do 1199px
   - modal trochę węższy, przewijalny
   - układ w jednej kolumnie (galeria nad linkami)
   - slider zostaje
*/
@media (max-width: 1199px) {

    .msc-modal {
        align-items: flex-start;
        justify-content: center;
        padding: 24px 12px;
    }

    .msc-modal-dialog {
        max-width: min(960px, 100% - 24px);
        max-height: calc(100vh - 40px);
        height: auto;
        overflow-y: auto;
        border-radius: 20px;
        padding: 20px 18px 20px;
    }

    .msc-modal-layout {
        flex-direction: column;
        gap: 22px;
        margin-top: 18px;
    }

    .msc-modal-body,
    .msc-modal-aside {
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* slider dalej 16:9, ale może być trochę wyższy */
    .msc-gallery-main {
        aspect-ratio: 16 / 9;
    }

    .msc-gallery-thumbs {
        justify-content: flex-start;
    }
}

/* TELEFONY: do 767px
   - modal na pełny ekran
   - jedna kolumna
   - slider na pełną szerokość, miniatury przewijane horyzontalnie
*/
@media (max-width: 767px) {

    .msc-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .msc-modal-dialog {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 16px 12px 18px;
    }

    .msc-modal-header {
        padding-right: 38px;
        margin-bottom: 14px;
    }

    .msc-modal-header h2 {
        font-size: 1.5rem;
    }

    .msc-modal-sub {
        font-size: 0.9rem;
    }

    .msc-modal-close {
        top: 10px;
        right: 10px;
    }

    .msc-modal-layout {
        flex-direction: column;
        margin-top: 12px;
        gap: 14px;
    }

    .msc-gallery-main {
        aspect-ratio: 4 / 3; /* na telefonie trochę wyższe foto */
    }

    .msc-gallery-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }

    .msc-thumb {
        flex: 0 0 120px;
    }

    .msc-links h3 {
        font-size: 0.95rem;
    }

    .msc-links li {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
}

/* BARDZO DUŻE EKRANY – lekko szerzej, ale styl ten sam jak teraz */
@media (min-width: 1440px) {
    .msc-modal-dialog {
        max-width: min(1400px, 100% - 96px);
    }
}


@media (max-width: 405px) {
    .msc-gallery-thumbs {
        display: none;
    }
}