*{box-sizing:border-box}
:root{
  --cyan:#37f5ff;
  --magenta:#ff2bd6;
  --yellow:#ffd54f;
  --green:#50ffb1;
  --red:#ff405c;
  --text:#eef9ff;
  --muted:rgba(220,240,248,.6)
}
html,body{margin:0;min-height:100%}
body{min-height:100vh;background:#020508;color:var(--text);font-family:"Rajdhani",system-ui,sans-serif}
.bg{
  position:fixed;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 45%,rgba(0,0,0,.48)),
    url("./background.png") center/cover no-repeat;
  filter:brightness(.47) contrast(1.1);
  transform:scale(1.025)
}
.vignette{
  position:fixed;inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 38%,transparent 22%,rgba(0,0,0,.27) 60%,rgba(0,0,0,.82))
}
.scanlines{
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.024) 0 1px,rgba(0,0,0,.08) 2px 4px);
  mix-blend-mode:overlay
}
.shell{position:relative;z-index:2;min-height:100vh;padding:30px}
.page{
  position:relative;
  width:min(1180px,96vw);
  margin:auto;
  padding:28px 36px 24px;
  background:linear-gradient(180deg,rgba(4,14,20,.94),rgba(2,7,11,.88));
  border:1px solid rgba(55,245,255,.3);
  backdrop-filter:blur(12px);
  box-shadow:0 22px 90px rgba(0,0,0,.55),inset 0 0 42px rgba(55,245,255,.035);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)
}
.corner{position:absolute;width:34px;height:34px}
.tl{top:8px;left:8px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.tr{top:8px;right:8px;border-top:2px solid var(--magenta);border-right:2px solid var(--magenta)}
.bl{bottom:8px;left:8px;border-bottom:2px solid var(--magenta);border-left:2px solid var(--magenta)}
.br{bottom:8px;right:8px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan)}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 4px 14px;
  border-bottom:1px solid rgba(55,245,255,.13);
  font:9px "Orbitron",sans-serif;letter-spacing:.15em;
  color:rgba(218,242,250,.56)
}
.brand{color:inherit;text-decoration:none}
.dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--green);margin-right:8px
}
.meta{display:flex;gap:24px}

.hero{
  display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:center;
  padding:24px 10px 26px
}
.glitch-logo{position:relative;width:min(195px,42vw);margin:auto}
.glitch-logo img{width:100%;display:block}
.base{position:relative;z-index:2}
.glitch{position:absolute;inset:0;opacity:0;z-index:3;mix-blend-mode:screen}
.ga{filter:drop-shadow(6px 0 var(--cyan));animation:ga 2.8s infinite steps(1,end)}
.gb{filter:drop-shadow(-6px 0 var(--magenta));animation:gb 3.15s infinite steps(1,end)}
@keyframes ga{
  0%,87%,100%{opacity:0}
  88%{opacity:.85;transform:translate(7px,-2px);clip-path:inset(12% 0 64% 0)}
  91%{opacity:.8;transform:translate(-5px,2px);clip-path:inset(58% 0 15% 0)}
  95%{opacity:0}
}
@keyframes gb{
  0%,80%,100%{opacity:0}
  81%{opacity:.8;transform:translate(-8px,1px);clip-path:inset(20% 0 53% 0)}
  85%{opacity:.8;transform:translate(6px,-2px);clip-path:inset(66% 0 9% 0)}
  89%{opacity:0}
}
.eyebrow{
  margin:0 0 7px;
  color:var(--cyan);
  font:9px "Orbitron",sans-serif;
  letter-spacing:.3em
}
h1{
  margin:0;
  font:700 clamp(42px,6vw,72px)/.98 "Orbitron",sans-serif;
  letter-spacing:.035em
}
h1 span{
  display:block;
  text-shadow:3px 0 rgba(55,245,255,.55),-3px 0 rgba(255,43,214,.5)
}
.lead{max-width:720px;margin:13px 0 0;color:rgba(235,247,252,.68);font-size:18px;line-height:1.45}

.current-project{
  margin:0 0 28px;
  border:1px solid rgba(255,213,79,.48);
  background:
    linear-gradient(110deg,rgba(255,213,79,.06),rgba(55,245,255,.03)),
    rgba(0,0,0,.22);
  box-shadow:inset 0 0 32px rgba(255,213,79,.025)
}
.current-project-id{
  position:absolute;left:10px;bottom:9px;
  padding:4px 6px;border:1px solid rgba(255,213,79,.48);
  background:rgba(0,0,0,.55);
  color:var(--yellow);font:7px "Orbitron",sans-serif;letter-spacing:.13em
}
.hidden{display:none}
.current-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 13px;
  border-bottom:1px solid rgba(255,213,79,.18);
  font:8px "Orbitron",sans-serif;letter-spacing:.18em;color:var(--yellow)
}
.pulse{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 10px var(--yellow);
  margin-right:8px;animation:pulse 1.2s infinite
}
@keyframes pulse{50%{opacity:.3}}
.current-status{color:var(--green)}
.current-content{
  display:grid;grid-template-columns:38% 1fr;gap:22px;padding:14px
}
.current-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 12 / 7;

    overflow: hidden;

    border: 1px solid rgba(255,213,79,.18);
}

.current-image-wrap img {
    width: 100%;
    height: 100%;

    object-fit: scale-down;
    object-position: center;

    display: block;
}
.current-copy{padding:8px 8px 8px 0}
.project-date{
  color:var(--yellow);
  font:8px "Orbitron",sans-serif;
  letter-spacing:.18em
}
.current-copy h2{
  margin:8px 0 10px;
  font:700 28px "Orbitron",sans-serif;
  letter-spacing:.05em
}
.current-copy p{color:var(--muted);font-size:16px;line-height:1.5}
.progress-area{margin-top:22px}
.progress-head{
  display:flex;justify-content:space-between;margin-bottom:6px;
  font:7px "Orbitron",sans-serif;letter-spacing:.15em;color:rgba(220,240,248,.5)
}
.progress-track{height:5px;border:1px solid rgba(55,245,255,.18);background:rgba(255,255,255,.05)}
.progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--yellow),var(--cyan));
  box-shadow:0 0 8px rgba(55,245,255,.35);
  transition:width .5s ease
}

.section-title{
  display:flex;align-items:center;gap:12px;margin:0 0 18px;
  font:8px "Orbitron",sans-serif;letter-spacing:.2em;color:rgba(205,235,245,.47)
}
.section-title i{
  height:1px;flex:1;
  background:linear-gradient(90deg,rgba(55,245,255,.45),rgba(255,43,214,.25))
}

.timeline{
  position:relative;
  padding:0 0 10px 0
}
.timeline::before{
  content:"";
  position:absolute;
  left:154px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--cyan),rgba(55,245,255,.2) 70%,transparent);
  box-shadow:0 0 10px rgba(55,245,255,.18)
}
.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:120px 48px 1fr;
  gap:10px;
  align-items:start;
  margin-bottom:26px
}
.timeline-node{
  grid-column:2;
  display:grid;place-items:center;
  min-height:28px
}
.timeline-node span{
  position:relative;z-index:2;
  width:13px;height:13px;
  transform:rotate(45deg);
  background:#071016;
  border:2px solid var(--cyan);
  box-shadow:0 0 12px rgba(55,245,255,.48)
}
.timeline-date{
  grid-column:1;
  grid-row:1;
  text-align:right;
  padding-top:0
}
.timeline-date span{
  display:block;
  font:8px "Orbitron",sans-serif;letter-spacing:.16em;color:rgba(205,235,245,.38)
}
.timeline-date strong{
  display:block;margin-top:4px;
  color:var(--cyan);
  font:11px "Orbitron",sans-serif;letter-spacing:.09em
}
.project-card {
    grid-column: 3;
    grid-row: 1;

    display: grid;
    grid-template-columns: 260px 1fr;

    min-height: 190px;
    height: 190px;

    overflow: hidden;

    border: 1px solid rgba(55,245,255,.16);

    background:
        linear-gradient(
            120deg,
            rgba(55,245,255,.04),
            rgba(255,43,214,.015)
        ),
        rgba(0,0,0,.16);
}
.project-card:hover{
  transform:translateX(3px);
  border-color:rgba(55,245,255,.48);
  box-shadow:inset 0 0 24px rgba(55,245,255,.035)
}
.project-image {
    position: relative;

    width: 260px;
    height: 190px;

    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;

    object-fit: scale-down;
    object-position: center;

    display: block;

    filter:
        saturate(.86)
        contrast(1.06)
        brightness(.72);
}
.image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(3,10,15,.8)),linear-gradient(135deg,rgba(55,245,255,.08),transparent 55%)
}
.project-id{
  position:absolute;left:10px;bottom:9px;
  padding:4px 6px;border:1px solid rgba(55,245,255,.35);
  background:rgba(0,0,0,.55);
  color:var(--cyan);font:7px "Orbitron",sans-serif;letter-spacing:.13em
}
.project-body{padding:20px 22px}
.project-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.project-head h2{
  margin:0;
  font:700 20px "Orbitron",sans-serif;
  letter-spacing:.06em
}
.status{
  padding:4px 6px;border:1px solid currentColor;
  font:6px "Orbitron",sans-serif;letter-spacing:.13em
}
.finished{color:var(--green)}
.project-body p{margin:12px 0;color:var(--muted);font-size:15px;line-height:1.45}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{
  padding:4px 6px;
  border:1px solid rgba(55,245,255,.18);
  color:rgba(55,245,255,.65);
  font:7px "Orbitron",sans-serif;letter-spacing:.1em
}

.about{
  display:flex;gap:10px;margin-top:8px;padding:11px 12px;
  border-left:2px solid var(--cyan);
  background:rgba(55,245,255,.025);
  color:rgba(220,240,247,.52);font-size:13px
}
.about span{color:var(--cyan);font-family:monospace}
.about p{margin:0}
.about code{color:var(--cyan)}

footer{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:13px;
  border-top:1px solid rgba(55,245,255,.12);
  color:rgba(200,228,238,.4);
  font:7px "Orbitron",sans-serif;letter-spacing:.15em
}

@media (max-width: 900px) {

    .shell {
        padding: 8px;
    }

    .page {
        width: 100%;
        padding: 22px 14px 20px;
    }


    /* ---------- HERO ---------- */

    .hero {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
        padding: 18px 4px 22px;
    }

    .glitch-logo {
        width: 145px;
    }

    h1 {
        font-size: clamp(34px, 11vw, 52px);
    }

    .lead {
        font-size: 15px;
        margin-inline: auto;
    }


    /* ---------- CURRENT PROJECT ---------- */

    .current-content {
        display: block;
        padding: 12px;
    }

    .current-image-wrap {
        width: 100%;
        aspect-ratio: 12 / 7;
        min-height: 0;
        max-height: none;
        margin-bottom: 18px;
    }

    .current-image-wrap img {
        width: 100%;
        height: 100%;

        /* amit te már beállítottál */
        object-fit: scale-down;

        object-position: center;
    }

    .current-copy {
        padding: 0;
    }

    .current-copy h2 {
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.15;
        margin: 8px 0 12px;
    }

    .current-copy p {
        font-size: 15px;
        line-height: 1.45;
    }

    .progress-area {
        margin-top: 18px;
    }


    /* ---------- ARCHIVE HEADER ---------- */

    .section-title {
        gap: 8px;
        font-size: 7px;
        letter-spacing: .12em;
    }

    .section-title span:last-child {
        white-space: nowrap;
    }


    /* ---------- TIMELINE ---------- */

    .timeline {
        padding-left: 0;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-item {
        display: grid;

        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;

        column-gap: 10px;
        row-gap: 8px;

        margin-bottom: 26px;
    }

    .timeline-node {
        grid-column: 1;
        grid-row: 1;

        min-height: 40px;
        align-items: start;
        padding-top: 7px;
    }

    .timeline-date {
        grid-column: 2;
        grid-row: 1;

        text-align: left;
        padding: 0;
    }

    .timeline-date span {
        font-size: 7px;
    }

    .timeline-date strong {
        font-size: 12px;
        margin-top: 2px;
    }


    /* ---------- PROJECT CARD ---------- */

    .project-card {
        grid-column: 2;
        grid-row: 2;

        display: block;

        width: 100%;
        height: auto;
        min-height: 0;
    }

    .project-image {
        width: 100%;
        height: auto;
        aspect-ratio: 12 / 7;
        min-height: 0;
    }

    .project-image img {
        width: 100%;
        height: 100%;

        object-fit: scale-down;
        object-position: center;
    }

    .project-body {
        padding: 16px;
    }

    .project-head {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .project-head h2 {
        font-size: clamp(18px, 6vw, 24px);
        line-height: 1.15;
    }

    .project-body p {
        font-size: 14px;
        line-height: 1.45;
    }

    .status {
        flex-shrink: 0;
    }
}
@media (max-width: 560px) {

    .page {
        padding-inline: 10px;
    }

    .current-project {
        margin-bottom: 22px;
    }

    .current-header {
        font-size: 7px;
    }

    .current-status {
        font-size: 6px;
    }

    .section-title {
        margin-bottom: 14px;
    }

    .section-title i {
        min-width: 20px;
    }

    .timeline::before {
        left: 14px;
    }

    .timeline-item {
        grid-template-columns: 30px 1fr;
        column-gap: 8px;
    }

    .timeline-node span {
        width: 11px;
        height: 11px;
    }

    .project-body {
        padding: 14px;
    }

    .project-head {
        display: block;
    }

    .status {
        display: inline-block;
        margin-top: 8px;
    }

    .tags {
        gap: 5px;
    }

    .tags span {
        font-size: 6px;
    }
}
.project-body a {
    color: var(--cyan);
    text-decoration: none;

    border-bottom: 1px solid rgba(55, 245, 255, .35);

    transition:
        color .15s ease,
        border-color .15s ease,
        text-shadow .15s ease;
}

.project-body a:visited {
    color: var(--cyan);
}

.project-body a:hover {
    color: #ffffff;

    border-bottom-color: var(--green);

    text-shadow:
        0 0 6px rgba(55, 245, 255, .65),
        0 0 12px rgba(0, 214, 143, 0.25);
}

.project-body a:active {
    color: var(--green);
}

.project-body a:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: 3px;
}