/* style.css — poprawiona i ostateczna wersja */
:root{
  --bg-dark: #08080a;
  --white: #ffffff;
  --muted: #bdbdbd;
  --accent: #7b5cff;
  --accent-2: #a38bff;
  --glass: rgba(255,255,255,0.03);
  --radius: 14px;
  --container-w: 1200px;
  --ease: cubic-bezier(.2,.9,.3,1);
  --shadow-1: 0 10px 30px rgba(0,0,0,0.6);
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,var(--bg-dark) 0%, #070708 100%);color:var(--white);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:16px}

/* container */
.container{max-width:var(--container-w);margin:0 auto;padding:2rem}

/* header */
.site-header{position:sticky;top:0;z-index:120;background:linear-gradient(180deg, rgba(10,10,12,0.25), transparent);backdrop-filter: blur(8px);border-bottom:1px solid rgba(255,255,255,0.03);transition:transform .4s var(--ease),padding .3s var(--ease)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--white)}
.brand-logo{width:44px;height:44px}
.brand-text{font-weight:600;letter-spacing:.6px}

/* nav */
.nav{display:flex}
.nav-list{display:flex;gap:1rem;list-style:none}
.nav-link{color:var(--muted);text-decoration:none;padding:.6rem .9rem;border-radius:10px;font-weight:600;position:relative;transition:all .25s var(--ease)}
.nav-link:hover{color:var(--white)}
.nav-link.active{color:var(--white);box-shadow:0 10px 30px rgba(123,92,255,0.06)}

/* hamburger */
.hamburger{display:none;background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.5rem;border-radius:10px}
.h-line{display:block;width:20px;height:2px;background:var(--white);margin:3px 0;transition:transform .35s var(--ease),opacity .2s var(--ease)}

/* preloader */
.preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(8,8,10,0.92),rgba(8,8,10,0.98));z-index:200}
.preloader .loader{width:48px;height:48px;border-radius:50%;border:4px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{padding:4rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 520px;gap:2rem;align-items:center}
.hero-title{font-size:clamp(2rem,4vw,3.4rem);line-height:1.02;margin-bottom:.5rem}
.hero-title .accent{color:var(--accent)}
.hero-sub{color:var(--muted);max-width:55ch;margin-bottom:1rem}
.hero-cta .btn{margin-right:.6rem}
.quick-stats{display:flex;gap:1rem;margin-top:1rem;list-style:none;padding:0}
.quick-stats li{display:flex;flex-direction:column;align-items:flex-start;color:var(--muted)}

/* reel card */
.reel-card{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-1);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));transition:transform .6s var(--ease)}
.reel-video{width:100%;height:100%;object-fit:cover;min-height:320px;display:block}
.reel-meta{position:absolute;left:1rem;bottom:1rem;color:var(--white);text-shadow:0 6px 20px rgba(0,0,0,0.6)}
.reel-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:.35rem .6rem;border-radius:999px;font-weight:700;font-size:.75rem;color:#fff}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.feature{background:var(--glass);padding:1.4rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.feature h4{color:var(--accent);margin-bottom:.5rem}

/* cta band */
.cta-band{margin:3rem 0;padding:2rem 0;background:linear-gradient(180deg,rgba(123,92,255,0.06),transparent);border-radius:12px}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* projects page */
.projects-page .section-title{font-size:2rem;margin-bottom:.25rem}
.projects-controls{display:flex;gap:1rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
#searchProjects{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:.6rem 1rem;border-radius:10px;color:var(--white);min-width:260px}
.filter-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:.5rem .75rem;border-radius:10px;color:var(--muted);cursor:pointer}
.filter-btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 12px 40px rgba(123,92,255,0.12)}

/* projects grid - CENTERED */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,420px));justify-content:center;gap:1.25rem;margin:2rem 0}
.project-tile{position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));transition:transform .35s var(--ease),box-shadow .35s var(--ease);border:1px solid rgba(255,255,255,0.03)}
.project-tile:hover{transform:translateY(-10px);box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.project-thumb{width:100%;height:220px;object-fit:cover;display:block}
.project-body{padding:1rem}
.project-title{font-weight:700;margin-bottom:.35rem}
.project-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.tag{font-size:.8rem;padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted)}

/* lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.88));z-index:9999}
.lightbox.open{display:flex}
.lb-inner{max-width:1100px;width:95%;border-radius:12px;overflow:hidden}
.lb-close{position:absolute;top:18px;right:20px;background:transparent;border:none;color:#fff;font-size:34px;cursor:pointer}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.about-aside .card{background:var(--glass);padding:1rem;border-radius:12px;margin-bottom:1rem}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.stat-num{font-size:1.6rem;font-weight:800;color:var(--accent)}
.gear ul{list-style:disc;margin-left:1rem;color:var(--muted)}
.timeline ol{margin-left:1rem;color:var(--muted)}
.skills-grid{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.skill-pill{padding:.5rem .75rem;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted)}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.25rem}
.contact-card{background:var(--glass);padding:1.25rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.field{position:relative;margin-bottom:1rem}
.field input,.field textarea{width:100%;padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--white);outline:none}
.field label{position:absolute;left:14px;top:14px;transition:transform .18s var(--ease),font-size .18s var(--ease),top .18s var(--ease);color:var(--muted);pointer-events:none}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-36px) scale(.95);
  font-size:.85rem;
  top:10px;
  color:var(--accent);
}
.form-actions{display:flex;gap:.5rem;margin-top:.75rem}
.form-msg{margin-top:.6rem;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:700;cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 30px rgba(123,92,255,0.12)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white)}

/* scroll reveal */
.scroll-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:1.25rem}
  .about-grid{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:block}
  .projects-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding:0 1rem}
}