:root{
  --bg:#06121e;
  --panel:#081a2a;
  --neon:#39c6ff;
  --neon-soft:#7fe0ff;
  --text:#d6f1ff;
  --muted:#9ac7e6;
}

/* GLOBAL */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Orbitron",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(900px 700px at 10% -10%,rgba(0,170,255,.15),transparent 60%),
    radial-gradient(1000px 800px at 90% 110%,rgba(0,120,200,.15),transparent 65%),
    linear-gradient(180deg,#071523,#030910);
  color:var(--text);
  overflow-x:hidden;
}

/* HERO */
.hero{
  position:relative; height:60vh;
  background:center left/cover no-repeat;
  display:flex; align-items:flex-end; padding:60px 6%;
  box-shadow:inset -220px 0 200px rgba(0,0,0,.6), inset 0 -160px 160px rgba(0,0,0,.6);
}
.hero h1{
  margin:0;
  font-size:clamp(42px,6vw,90px);
  color:var(--neon);
  text-shadow:0 0 10px var(--neon),0 0 25px var(--neon);
}

/* INTRO */
.intro{
  padding:50px 6% 30px;
  font-size:20px; color:var(--muted);
  max-width:960px; line-height:1.6;
}

/* SECTIONS */
.section{ padding:80px 6%; position:relative }
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(6,18,30,.85),rgba(5,14,24,.85));
  border:1px solid rgba(70,200,255,.25);
  border-radius:16px;
  padding:70px 30px 40px;
  box-shadow:inset 0 0 25px rgba(80,210,255,.1);
}
.panel:after{
  content:""; position:absolute; inset:12px;
  border-radius:12px;
  border:1px solid rgba(145,235,255,.5);
  box-shadow:0 0 15px rgba(120,220,255,.45) inset;
  pointer-events:none;
}

/* SECTION LABEL WITH ICON */
.section-icon{
  position:absolute; top:-26px; left:26px;
  display:flex; align-items:center; gap:10px;
  background:#081a2a;
  border:1px solid rgba(145,235,255,.7);
  border-radius:12px; padding:8px 14px;
  box-shadow:0 0 12px rgba(100,220,255,.7);
}
.section-icon svg{ width:20px; height:20px; stroke:var(--neon-soft); fill:none; stroke-width:2 }
.section-icon span{ color:var(--neon-soft); text-shadow:0 0 8px var(--neon) }

/* TIMELINE */
.timeline{ display:flex; flex-direction:column; gap:28px; margin-top:30px }
.job{
  position:relative; background:var(--panel);
  border:1px solid rgba(70,200,255,.2);
  border-radius:14px; padding:24px 22px;
  box-shadow:inset 0 0 18px rgba(80,210,255,.1);
}
.job:before{
  content:""; position:absolute; left:-10px; top:26px;
  width:6px; height:6px; background:var(--neon);
  border-radius:50%; box-shadow:0 0 8px var(--neon);
}
.job-header h3{ margin:0; color:var(--neon); text-shadow:0 0 10px var(--neon); font-size:20px }
.job-header .company{ font-size:14px; color:var(--neon-soft) }
.job-header .date{ font-size:12px; color:var(--muted) }
.job ul{ margin:8px 0 0; padding-left:16px; list-style:none }
.job ul li{ font-size:14px; line-height:1.6; color:var(--text); margin-bottom:4px }
.job ul li:before{ content:"▸"; color:var(--neon); margin-right:6px }

/* SKILLS */
.skills-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:40px
}
@media(max-width:950px){ .skills-grid{ grid-template-columns:1fr } }

.skill-card{
  background:var(--panel);
  border:1px solid rgba(70,200,255,.2);
  border-radius:14px; padding:24px 20px;
  box-shadow:inset 0 0 18px rgba(80,210,255,.08);
}
.skill-card h3{
  margin:0 0 16px; color:var(--neon);
  text-transform:uppercase; text-shadow:0 0 10px var(--neon);
  font-size:18px;
}
.skill{ margin-bottom:14px }
.skill-name{ font-size:13px; color:#bfe9ff; margin-bottom:6px }
.bar{ display:flex; gap:5px }
/* 10 kafelków: domyślnie CZARNE (widoczne) */
.block{
  flex:1; height:14px; border-radius:3px;
  background:#000; outline:1px solid #0a1c29;
}
/* „Włączone” kafelki + stały glow 6px (intensywność wynika z koloru) */
.block.on{ box-shadow:0 0 6px currentColor, inset 0 0 1px rgba(255,255,255,.1) }
.block.on.sh1{ color:#0e5576; background:currentColor }
.block.on.sh2{ color:#1392bb; background:currentColor }
.block.on.sh3{ color:#16afe1; background:currentColor }
.block.on.sh4{ color:#29c3ff; background:currentColor }
.block.on.sh5{ color:#68d7ff; background:currentColor }
.block.on.sh6{ color:#9fe9ff; background:currentColor }
.block.on.sh7{ color:#d4f8ff; background:currentColor }
.block.on.sh8{ color:#e6fcff; background:currentColor }   
.block.on.sh9{ color:#f2feff; background:currentColor }   
.block.on.sh10{ color:#ffffff; background:currentColor }  

/* EXTRA SKILLS */
.extra-skills{ margin-top:60px; display:flex; flex-wrap:wrap; gap:10px }
.extra-skills span{
  font-size:13px; color:var(--neon-soft);
  border:1px solid rgba(145,235,255,.5);
  border-radius:10px; padding:6px 10px;
  background:rgba(8,26,44,.8);
  box-shadow:0 0 8px rgba(120,220,255,.4) inset;
}
/* ========== METODYKA PRACY (PROCESS) ========== */
.process-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:22px; margin-top:36px;
}
@media (max-width:1100px){ .process-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:780px){  .process-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){  .process-grid{ grid-template-columns:1fr } }

.step-card{
  background:var(--panel);
  border:1px solid rgba(70,200,255,.22);
  border-radius:14px; padding:18px 16px;
  box-shadow:inset 0 0 18px rgba(80,210,255,.08);
  display:flex; flex-direction:column; gap:10px;
  min-height:140px;
}
.step-head{ display:flex; align-items:center; gap:10px }
.step-num{
  min-width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px; color:var(--bg); background:var(--neon); font-weight:700;
  box-shadow:0 0 10px var(--neon);
}
.step-icon svg{ width:22px; height:22px; stroke:var(--neon-soft); fill:none; stroke-width:2;
  filter: drop-shadow(0 0 6px var(--neon-soft));
}
.step-title{ margin:0; color:var(--neon); text-shadow:0 0 10px var(--neon); font-size:16px }
.step-desc{ margin:0; color:#bfe9ff; font-size:13px; line-height:1.6 }


/* ====== ANIMACJA DLA KROKÓW METODYKI ====== */
.step-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor:default;
}
.step-card:hover{
  transform: translateY(-2px);
  border-color: rgba(145,235,255,.55);
  box-shadow:
    inset 0 0 22px rgba(120,220,255,.15),
    0 0 12px rgba(100,220,255,.25),
    0 0 20px rgba(100,220,255,.35);
}
.step-card:hover .step-num{
  background:var(--neon-soft);
  box-shadow:0 0 12px var(--neon-soft);
}
.step-card:hover .step-title{
  color:var(--neon-soft);
  text-shadow:0 0 12px var(--neon-soft);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ===== Header + Burger ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:1100;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 12px; background:linear-gradient(180deg, rgba(6,18,30,.7), rgba(6,18,30,.2));
  border-bottom:1px solid rgba(145,235,255,.25);
  backdrop-filter:saturate(140%) blur(6px);
}
.header-hotarea{ position:fixed; left:0; right:0; top:64px; height:15px; z-index:1099; }

.burger{
  position:relative; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(145,235,255,.5); background:#081a2a;
  display:grid; place-items:center; cursor:pointer; isolation:isolate;
  box-shadow:0 0 12px rgba(120,220,255,.25), inset 0 0 12px rgba(120,220,255,.15);
  transition:transform .2s ease;
}
.burger:hover{ transform:scale(1.03) }
.burger span{
  position:absolute; width:20px; height:2px; background:var(--neon-soft);
  border-radius:2px; left:50%; transform:translateX(-50%);
  filter: drop-shadow(0 0 6px var(--neon-soft));
}
.burger span:nth-child(1){ top:14px }
.burger span:nth-child(2){ top:21px }
.burger span:nth-child(3){ top:28px }
.burger:before{
  content:""; position:absolute; inset:-6px;
  border-radius:inherit; box-shadow:0 0 0 0 rgba(57,198,255,.5);
  animation:burgerPulse 1.8s ease-out infinite;
}
@keyframes burgerPulse{
  0%{ box-shadow:0 0 0 0 rgba(57,198,255,.55) }
  70%{ box-shadow:0 0 0 16px rgba(57,198,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(57,198,255,0) }
}

/* ===== Overlay menu ===== */
.menu-overlay{
  position:fixed; inset:0; z-index:1200; display:none;
  background: radial-gradient(1200px 800px at 70% 10%, rgba(0,170,255,.08), transparent 60%),
              radial-gradient(1000px 900px at 30% 90%, rgba(0,120,200,.10), transparent 65%),
              rgba(3,9,16,.96);
}
.menu-overlay.active{ display:block }
.matrix-canvas{ position:absolute; inset:0; display:block; opacity:.65; }

.menu-panel{
  position:relative; height:100%; display:grid; place-items:center; padding:80px 24px;
}
.menu-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:26px; grid-template-columns:repeat(4, minmax(180px, 1fr));
}
@media (max-width:1100px){ .menu-grid{ grid-template-columns:repeat(2, minmax(180px,1fr)) } }
@media (max-width:560px){ .menu-grid{ grid-template-columns:1fr } }

.menu-item a{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none; padding:22px 18px; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(8,26,42,.85), rgba(5,14,24,.85));
  border:1px solid rgba(145,235,255,.35);
  box-shadow: inset 0 0 22px rgba(120,220,255,.12), 0 0 18px rgba(100,220,255,.12);
  transform:translateY(-120vh); /* start „z góry” */
}
.menu-item .mi{
  width:min(14vw,120px); height:min(14vw,120px); stroke:var(--neon-soft); fill:none; stroke-width:2.2;
  filter: drop-shadow(0 0 12px var(--neon-soft));
}
.menu-item span{ color:var(--neon); text-shadow:0 0 10px var(--neon); font-weight:700; letter-spacing:.5px }

/* efekt na hover */
.menu-item a:hover{
  border-color: rgba(145,235,255,.7);
  box-shadow: inset 0 0 28px rgba(120,220,255,.18), 0 0 20px rgba(100,220,255,.22);
}

/* animacja spadania ikon (JS nadaje opóźnienia) */
@keyframes iconFall {
  0%   { transform:translateY(-120vh) scale(.9); opacity:0 }
  60%  { opacity:1 }
  100% { transform:translateY(0) scale(1) }
}

/* gdy overlay aktywny – odpal animacje elementów */
.menu-overlay.active .menu-item a{
  animation: iconFall .9s cubic-bezier(.18,.65,.18,1) forwards;
}

/* klik pozycja – zamknięcie */
.menu-overlay [href] { cursor: pointer }


/* ===== Simple neon burger + icons (minimal) ===== */
.simple-header{
  position:fixed; top:20px; left:20px; z-index:1400;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.burger{
  position:relative; width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(145,235,255,.6); background:#081a2a;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 15px rgba(120,220,255,.3), inset 0 0 15px rgba(120,220,255,.15);
}
.burger span{
  position:absolute; width:26px; height:3px; background:var(--neon);
  border-radius:2px; left:50%; transform:translateX(-50%);
  filter: drop-shadow(0 0 6px var(--neon));
}
.burger span:nth-child(1){ top:18px }
.burger span:nth-child(2){ top:26px }
.burger span:nth-child(3){ top:34px }
.burger:before{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(57,198,255,.5); animation:burgerPulseSimple 2s ease-out infinite;
}
@keyframes burgerPulseSimple{
  0%{ box-shadow:0 0 0 0 rgba(57,198,255,.55) }
  70%{ box-shadow:0 0 0 24px rgba(57,198,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(57,198,255,0) }
}
.icon-menu{ display:none; flex-direction:column; gap:10px; margin-top:6px; }
.icon-menu.active{ display:flex }
.icon-link{
  display:grid; place-items:center; width:44px; height:44px; background:#081a2a;
  border-radius:50%; border:1px solid rgba(145,235,255,.4); transition:all .25s ease;
}
.icon-link svg{
  width:24px; height:24px; stroke:var(--neon); fill:none; stroke-width:2;
  filter: drop-shadow(0 0 6px var(--neon)); transition:filter .25s ease, transform .25s ease;
}
.icon-link:hover svg{ filter: drop-shadow(0 0 14px var(--neon)); transform:scale(1.15); }


/* ===== OVERRIDE: menu po prawej, ikony = burger (56x56), glow POD ikoną ===== */
.simple-header{
  position:fixed; top:20px; right:20px; left:auto; z-index:1400;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.icon-menu{ display:none; flex-direction:column; gap:10px; margin-top:6px; }
.icon-menu.active{ display:flex }

/* Rozmiar ikon = burger */
.icon-link{
  display:grid; place-items:center;
  width:56px; height:56px;
  background:#081a2a;
  border-radius:50%;
  border:1px solid rgba(145,235,255,.4);
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.icon-link svg{
  width:26px; height:26px;
  stroke:var(--neon); fill:none; stroke-width:2;
  filter: drop-shadow(0 0 6px var(--neon));
  transition:filter .3s ease, transform .3s ease;
}

/* Glow POD ikoną (nie wokół przycisku) */
.icon-link::after{
  content:""; position:absolute; bottom:-3px; left:50%;
  transform:translateX(-50%);
  width:28px; height:8px;
  background:radial-gradient(ellipse at center, var(--neon) 0%, transparent 70%);
  opacity:0; filter:blur(6px);
  transition:opacity .3s ease;
}
.icon-link:hover::after{ opacity:.9; }
.icon-link:hover svg{ transform:translateY(-2px) scale(1.1); filter:drop-shadow(0 0 10px var(--neon-soft)); }
/* ===== Korekta położenia nagłówków sekcji ===== */
.section-icon{
  position:absolute;
  top:-48px; /* było -26px — podnosi etykietę wyżej */
  left:26px;
  transform:translateY(-6px); /* lekkie uniesienie */
  background:#081a2a;
  border:1px solid rgba(145,235,255,.7);
  border-radius:12px; padding:8px 14px;
  box-shadow:0 0 12px rgba(100,220,255,.7);
}

/* efekt subtelnego „unoszenia” przy hoverze */
.panel:hover .section-icon{
  transform:translateY(-10px);
  transition:transform .25s ease;
}