:root{
  --bg:#0b0f14; --fg:#e7eef4; --muted:#9fb1c2; --aqua:#07d6e6; --card:#111722; --line:rgba(255,255,255,.12);
  --accent:linear-gradient(135deg,#07d6e6,#5be3f6); --grid:rgba(255,255,255,.05); --ink:#031016;
  --pad:clamp(56px,9vw,112px); --gap:clamp(12px,2.4vw,24px); --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;background:var(--bg);color:var(--fg);line-height:1.6;overflow-x:hidden}
a{color:var(--aqua);text-decoration:none;transition:.25s}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,3.5vw,32px)}
.section{padding-block:var(--pad);scroll-margin-top:84px}
.section h2{font-size:clamp(26px,3.4vw,44px);margin:0 0 8px;text-align:center}
.lead{text-align:center;margin:0 auto 18px;max-width:72ch;color:#c7d6e3}

/* Header — 100vw + inner container */
header{
  position:sticky;top:0;z-index:60;width:100vw;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(11,15,20,.92),rgba(11,15,20,.7));
  border-bottom:1px solid var(--line)
}
.header-inner{padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-size: 24px;}
.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent)}
nav{display:flex;gap:14px;align-items:center}
nav a{padding:10px 12px;border-radius:10px;white-space:nowrap}
nav a:hover,nav a.active{background:rgba(255,255,255,.08)}
.menu-toggle{display:none;border:1px solid var(--line);background:rgba(255,255,255,.06);padding:8px 12px;border-radius:10px}
.btn-nav{padding:8px 12px}

/* Full-width progress bar */
.progressbar{position:fixed;top:0;left:0;right:0;height:3px;width:0;background:linear-gradient(90deg,#07d6e6,#5be3f6);z-index:100}

/* Spotlight cursor */
#spotlight{position:fixed;inset:0;pointer-events:none;z-index:10;
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,20%), rgba(7,214,230,.14), transparent 60%)}

/* Hero */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden}
.grid{position:absolute;inset:0;background-image:
  linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(60% 60% at 50% 40%, #000 60%, transparent 100%);pointer-events:none}
.blob{position:absolute;width:min(64vmin,620px);height:min(64vmin,620px);top:10%;left:50%;translate:-50% 0;filter:blur(48px);opacity:.34;
  background:radial-gradient(circle at 30% 30%, #07d6e6, transparent 40%),
             radial-gradient(circle at 70% 60%, #5be3f6, transparent 45%),
             radial-gradient(circle at 40% 70%, #23b7c4, transparent 50%);
  animation:blob 18s ease-in-out infinite alternate;z-index:-1}
@keyframes blob{0%{transform:translate3d(-10px,0,0) scale(1)}50%{transform:translate3d(10px,8px,0) scale(1.06)}100%{transform:translate3d(-6px,14px,0) scale(.98)}}
.hero-inner{display:flex;gap:clamp(20px,4vw,44px);align-items:center;justify-content:space-between;width:100%;padding-block:clamp(24px,3vw,40px)}
.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.05;margin:0 0 18px;
  background-image:linear-gradient(120deg,#fff 0%,#b8f2ff 20%,#fff 40%);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite; text-align: center;}
@keyframes shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px; justify-content: center;}
.btn{position:relative;border:none;cursor:pointer;font-weight:700;letter-spacing:.02em;padding:14px 18px;border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease}
.btn-primary{color:var(--ink);background:var(--accent);box-shadow:0 10px 30px rgba(7,214,230,.25);overflow:hidden}
.btn-primary:hover{transform:translateY(-2px);}
nav .btn-primary:hover{color:var(--aqua);}
.btn-ghost{color:var(--fg);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.btn .ripple{position:absolute;inset:auto;translate:-50% -50%;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.6);
  opacity:.6;animation:ripple .7s ease-out forwards}
@keyframes ripple{to{opacity:0;transform:scale(18)}}

/* Hero image card */
.avatar-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:24px;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.avatar{display:block;width:min(420px,36vw);height:auto;border-radius:16px}

/* CTA banner */
.cta-banner{margin-block:calc(var(--pad) * .6);border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  padding:clamp(16px,3.2vw,28px);display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.cta-banner h3{margin:0;font-size:clamp(18px,2.4vw,26px)}

/* KPI strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
.kpi{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.kpi .num{font-size:clamp(22px,2.6vw,34px);font-weight:800}
.kpi .lbl{color:var(--muted)}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,20px)}
.project{grid-column:span 12;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(12px,2vw,18px);align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:22px;padding:clamp(14px,2.4vw,20px);position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.project:nth-child(even){grid-template-columns:.95fr 1.05fr}
.shot{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line); aspect-ratio: 800 / 396;}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  transform:translateX(-120%);transition:transform .8s ease}
.project:hover .shot::after{transform:translateX(120%)}
.shot img{display:block;width:100%;height:auto;transform:scale(1.02);transition:transform .6s ease}
.project:hover .shot img{transform:scale(1.06)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.meta{color:var(--muted);font-size:14px}
.project .mini-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* Skills — clean cards */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto}
.skill-card{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px}
.skill-card i{font-size:20px;opacity:.9}
.skill-card b{display:block}
.skill-card small{display:block;color:var(--muted);line-height:1.45}

/* Offer */
.grid3{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,16px);align-items:stretch
}
.pricing{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:clamp(16px,2.2vw,20px);overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.pricing:hover{transform:translateY(-3px);border-color:rgba(7,214,230,.35);
  box-shadow:0 14px 40px rgba(7,214,230,.10)}
.pricing.featured{
  border-color:rgba(7,214,230,.55);
  box-shadow:0 18px 56px rgba(7,214,230,.14)
}
.pricing .label{
  position:absolute;top:12px;right:12px;
  font-size:12px;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)
}
.pricing h3{margin:0 0 6px;font-size:clamp(18px,2vw,20px)}
.pricing .price{
  margin:0 0 10px;font-weight:800;font-size:clamp(18px,2.2vw,22px);
  color:#dff7ff
}
.features{list-style:none;margin:8px 0 25px 0;padding:0;display:grid;gap:8px}
.features li{
  position:relative;padding-left:24px;color:#cfe3ef
}
.features li::before{
  content:"";position:absolute;left:0;top:8px;width:10px;height:10px;
  border-radius:999px;background:linear-gradient(135deg,#07d6e6,#5be3f6);
  box-shadow:0 0 0 3px rgba(7,214,230,.15)
}
.pricing .mini-cta{margin-top:auto;display:flex;gap:10px}
.btn-block{width:100%;text-align:center}

/* PROCESS — stepper */
.process{max-width:1000px;margin:0 auto;position:relative}
.process .rail{position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.18),rgba(255,255,255,.06));border-radius:999px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.step{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:18px 14px 14px 14px;min-height:140px;display:flex;gap:12px;transition:transform .2s}
.step .num{position:absolute;top:-12px;left:14px;width:32px;height:32px;border-radius:999px;background:var(--accent);
  color:var(--ink);font-weight:800;display:grid;place-items:center;box-shadow:0 6px 18px rgba(7,214,230,.25);transform:scale(.85);transition:.35s}
.step.in .num{transform:scale(1)}
.step h3{margin:22px 0 6px;font-size:18px}
.step p{margin:0;color:#cfe3ef;font-size:14px}
.step:hover{transform:translateY(-3px)}

/* FORM — premium card + pola + checkbox RODO */
/* Sekcja kontaktu — layout */
.contact-header { text-align:center; margin-bottom: 18px; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}
@media (max-width: 980px){ .contact-grid { grid-template-columns: 1fr; } }

/* Karta informacyjna */
.info-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:18px;
  padding: clamp(14px, 2.2vw, 20px);
}
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.info-list li{ display:flex; gap:12px; align-items:flex-start; }
.info-list i{ font-size:18px; opacity:.9; margin-top:4px; }
.info-list b{ display:block; }
.info-list a, .info-list span{ color:#cfe3ef; }
.info-note{ margin:12px 0 0; color:#c7d6e3; font-size:14px; opacity:.9; }

/* Formularz — dopieszczona karta */
.contact-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 24px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  position: relative;
}
.contact-card::before{
  content:"";
  position:absolute; inset: -1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(7,214,230,.18), rgba(91,227,246,.08), transparent 60%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
}

/* Pola + ikony w polach */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 640px){ .form-row{ grid-template-columns:1fr; } }

.group{ display:grid; gap:6px; }
.group-message{ margin-top:8px; }
label .req{ color:#79e1ff; }

.field{
  width:100%; padding:12px 14px 12px 42px;
  border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:#0f1622; color:var(--fg);
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.field::placeholder{ color:#7f95a8; }
.field:focus{ outline:none; border-color:#36d9ea; box-shadow:0 0 0 4px rgba(7,214,230,.15); }
textarea.field{ min-height:140px; resize:vertical; }

.with-icon{ position:relative; }
.with-icon > i{
  position:absolute; left:12px; top:45px; font-size:16px; color:#9fb1c2; pointer-events:none;
}
.group-message.with-icon > i{ top:44px; }

/* Hinty, zgody, stopka formularza */
.hint{ color:#9fb1c2; font-size:12px; margin-top:6px; }
.consent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; margin-top:8px; }
.consent input{ appearance:none; position:absolute; opacity:0; }
.box{ width:20px; height:20px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background:#0f1622; display:grid; place-items:center; transition:.2s;position: relative; }
.box::after{
  content:""; width:10px; height:6px; border-left:2px solid var(--aqua); border-bottom:2px solid var(--aqua);
  transform:rotate(-45deg) scale(0); transform-origin:bottom left; transition:.2s;position: absolute;left:7px;
}
.consent input:checked + .box{ border-color:#36d9ea; box-shadow:0 0 0 3px rgba(7,214,230,.15); }
.consent input:checked + .box::after{ transform:rotate(-45deg) scale(1); }
.consent small{ display:block; color:var(--muted); line-height:1.5; }

.submit-row{ margin-top:10px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.submit-row .submit-btn{ padding-inline:22px; }
.submit-note{ color:#9fb1c2; font-size:12px; }


/* Footer */
footer.footer{padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line)}
.footer-title{text-align:center;margin:0 0 8px}
.footer-note{text-align:center;margin-top:75px;opacity:.7}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Back to top */
#toTop{position:fixed;right:18px;bottom:18px;z-index:90;opacity:0;pointer-events:none;transition:.3s}
#toTop.show{opacity:1;pointer-events:auto}

/* Floating contacts */
#icon-box{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:95}
.contact-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.contact-icon i{font-size:20px}

/* Accessibility */
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn,.shot img,.shine{transition:none;animation:none}
  .blob{animation:none}
  #spotlight{display:none}
}





/* Legal / Privacy */
.legal-title{ text-align:center; margin:0 0 6px; font-size:clamp(28px,3.6vw,42px); }
.legal .legal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 24px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  max-width: 980px;
  margin: 18px auto 0;
}
.legal .legal-card h2{ font-size:clamp(18px,2.2vw,22px); margin:16px 0 6px; }
.legal .legal-card p, .legal .legal-card li{ color:#cfe3ef; }
.legal .legal-card ul{ margin:6px 0 12px 18px; }




/* Repsonsive */
/* ============== Zmienne / wysokość nagłówka ============== */
:root{ --headerH: 64px; }

/* Header niech nie wymusza 100vw (zapobiega poziomemu scrollowi) */
header{ width:100%; }

/* Sekcje z marginesem pod sticky header */
.section{ scroll-margin-top: var(--headerH); }

/* ============== NAV: mobile panel ============== */
@media (max-width:980px){
  .menu-toggle{
    display:inline-flex; align-items:center; gap:8px;
    line-height:1; height:40px; padding:8px 14px; font-weight:600;
  }

  header{ min-height:var(--headerH); }
  .header-inner{ min-height:var(--headerH); padding: 10px; }

  /* Z domyślnego "inline" robimy panel pod nagłówkiem */
  #mainNav{
    position:fixed;
    top:var(--headerH); left:0; right:0;
    display:none; flex-direction:column;
    gap:0; padding:10px;
    background:rgba(11,15,20,.97);
    border-top:1px solid var(--line);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
  #mainNav.show{ display:flex; }

  #mainNav a{
    display:block; width:100%;
    padding:14px 12px; border-radius:12px;
    font-size:16px; text-align:left;
  }
  #mainNav a.btn-nav{
    margin-top:6px; text-align:center; font-weight:800;
  }

  /* Zablokuj przesunięcia layoutu w headerze */
  .brand{ font-size:20px; }
}

/* ============== HERO: lepsza responsywność ============== */
@media (max-width:980px){
  .hero{ min-height:78vh; }
  .hero-inner{ flex-direction:column; text-align:center;padding-block: clamp(35px, 3vw, 40px); }
  .avatar{ width:min(350px,65vw); }
}

/* ============== PROJECTS: siatka i karty ============== */
.projects{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,20px); }

/* Desktop – jak było */
.project{
  grid-column:span 12;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center;
}

/* Kafel z obrazem — stabilne proporcje + lepszy crop */
.shot{ aspect-ratio: 3 / 2; }
.shot img{ width:100%; height:100%; object-fit:cover; }

/* Mid (tablet) – dwa równe pasy */
@media (max-width:1200px) and (min-width:981px){
  .project{ grid-template-columns:1fr 1fr; }
}

/* Mobile – 1 kolumna i stała kolejność (obraz nad tekstem) */
/* MOBILE FIX dla "Realizacje" — ujednolicenie układu kart */
@media (max-width:980px){
  /* 1 kolumna dla wszystkich, także dla parzystych */
  .project,
  .project:nth-child(even){
    grid-template-columns: 1fr !important;
  }

  /* obrazek zawsze nad tekstem (niezależnie od kolejności w DOM) */
  .project > .shot{
    order: -1;
  }

  /* kosmetyka kart na telefonie */
  .project{
    padding: 16px;
    border-radius: 18px;
    gap: 12px;
  }
  .project .badges{ margin: 6px 0 10px; }
  .shot{ aspect-ratio: 3 / 2; }
  .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
}


/* Dotyk: wyłącz efekty tilt/hover żeby nie "skakało" */
@media (hover:none){
  .project.tilt{ transform:none !important; }
  .project:hover .shot::after{ transform:none; }
  .project:hover .shot img{ transform:none; }
}

/* ============== GRIDY: umiejętności / oferta / pasek KPI ============== */
@media (max-width:980px){
  .skills-grid{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .strip{ grid-template-columns:1fr; }
}

/* ============== PROCESS: pełna kolumna + ukryj rail ============== */
@media (max-width:980px){
  .steps{ grid-template-columns:1fr; }
  .process .rail{ display:none; }
}

/* ============== FORM: kolumna na mobilu ============== */
@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
}

/* ============== Ikony kontaktu – ukryj na mobilu ============== */
@media (max-width:820px){
  #icon-box{ display:none; }
}

/* ============== Drobne poprawki dostępności tap-targetów ============== */
@media (max-width:980px){
  nav a, .menu-toggle{ min-height:44px; color:aliceblue;}
}





/* Wymuszenie font-display: swap na Font Awesome */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2") format("woff2");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-regular-400.woff2") format("woff2");
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(11,15,20,.95);
  color: #fff;
  padding: 12px 18px;
  text-align: center;
  font-size: 14px;
  z-index: 9999;
  border-top: 1px solid rgba(255,255,255,.15);
}
.cookie-banner p {
  margin: 0 0 8px;
}
.cookie-banner a {
  color: #07d6e6;
  text-decoration: underline;
}