/* ============================================================
   ITFactor — arkusz stylów
   Spis treści:
   1. Zmienne (design tokens)
   2. Reset i podstawy
   3. Pomocnicze (wrap, mono, disp)
   4. Nawigacja
   5. Hero
   6. Pasek technologii (marquee)
   7. Nagłówki sekcji
   8. Usługi
   9. Proces
   10. Realizacje
   11. Statystyki
   12. Opinia
   13. Kontakt
   14. Stopka
   15. Responsywność
   ============================================================ */

/* 1. Zmienne ------------------------------------------------ */
:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --surface:#141417;
  --line:#26262b;
  --ink:#f3f2ec;
  --muted:#8a8a92;
  --muted-2:#5c5c63;
  --accent:#c9f24e;
  --accent-dim:#a3c93c;
  --blue:#5b8cff;
  --r:18px;
}

/* 2. Reset i podstawy --------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* tekstura ziarna */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;
  background-image:url("../../assets/img/noise.svg");
}
::selection{background:var(--accent);color:#0a0a0b}
a{color:inherit;text-decoration:none}

/* 3. Pomocnicze --------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.disp{font-family:'Bricolage Grotesque',sans-serif;line-height:1.02;letter-spacing:-.02em}

/* 4. Nawigacja ---------------------------------------------- */
header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:.4s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(10,10,11,.72);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.logo .mark{width:28px;height:28px;display:block;filter:drop-shadow(0 0 10px rgba(201,242,78,.35))}
.logo .logo-f{background:linear-gradient(to bottom,var(--accent) 0%,var(--accent) 34%,var(--ink) 34%,var(--ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:.92rem;color:var(--muted);position:relative;transition:.25s}.nav-links a.btn{color:#0a0a0b}.nav-links a.btn:hover{color:#0a0a0b}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent);transition:.3s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#0a0a0b;padding:11px 22px;border-radius:100px;font-weight:600;font-size:.92rem;transition:.3s;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,242,78,.3)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);box-shadow:none;background:rgba(201,242,78,.06)}
/* Strefa klienta — tryb „wkrótce” */
.btn-soon{position:relative;cursor:not-allowed;opacity:.85}
.btn-soon:hover{transform:none;box-shadow:none;border-color:var(--line);background:transparent}
.btn-soon .soon-badge{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#0a0a0b;background:var(--accent);padding:2px 6px;border-radius:100px;line-height:1}
.btn-soon svg{width:15px;height:15px}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer}

/* 5. Hero --------------------------------------------------- */
.hero{position:relative;padding:200px 0 120px;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.glow-1{width:600px;height:600px;background:rgba(201,242,78,.14);top:-180px;right:-120px}
.glow-2{width:500px;height:500px;background:rgba(91,140,255,.12);bottom:-200px;left:-150px}
.hero-inner{position:relative;z-index:2}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:100px;color:var(--muted);margin-bottom:30px}
.badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);position:relative}
.badge .pulse::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--accent);opacity:.4;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.4}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
h1.hero-title{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:700;max-width:14ch}
h1.hero-title em{font-style:normal;color:var(--accent);position:relative}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:52ch;margin:30px 0 40px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.scroll-note{margin-top:64px;display:flex;gap:14px;align-items:center;color:var(--muted-2)}
.scroll-note .line{width:46px;height:1px;background:var(--line)}

/* animacja pojawiania się */
.reveal{opacity:0;transform:translateY(28px);transition:.9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.hero-inner > *{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-inner > *:nth-child(1){animation-delay:.1s}
.hero-inner > *:nth-child(2){animation-delay:.22s}
.hero-inner > *:nth-child(3){animation-delay:.34s}
.hero-inner > *:nth-child(4){animation-delay:.46s}
.hero-inner > *:nth-child(5){animation-delay:.58s}
@keyframes rise{to{opacity:1;transform:none}}

/* 6. Pasek technologii -------------------------------------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg-2)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll 26s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{color:var(--muted-2);font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.1em;white-space:nowrap}
.marquee span.hl{color:var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* 7. Nagłówki sekcji ---------------------------------------- */
section{position:relative}
.sec-pad{padding:120px 0}
.sec-head{margin-bottom:64px;max-width:640px}
.sec-head .mono{color:var(--accent);display:block;margin-bottom:18px}
.sec-head h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:700}
.sec-head p{color:var(--muted);margin-top:18px;font-size:1.08rem}

/* 8. Usługi ------------------------------------------------- */
.grid{display:grid;gap:20px}
.services{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:34px;transition:.4s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(201,242,78,.08),transparent 40%);opacity:0;transition:.4s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:#3a3a40}
.card:hover::before{opacity:1}
.card .ico{width:52px;height:52px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:24px;color:var(--accent)}
.card h3{font-family:'Bricolage Grotesque';font-size:1.4rem;font-weight:600;margin-bottom:12px}
.card p{color:var(--muted);font-size:.96rem}
.card ul{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.card li{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:100px}
.card-wide{grid-column:1 / -1;border-color:var(--accent-dim);background:linear-gradient(180deg,rgba(201,242,78,.05),var(--surface))}
.card-wide .card-wide-body{display:flex;gap:40px;align-items:center;justify-content:space-between}
.card-wide .ico{color:#0a0a0b;background:var(--accent);border-color:var(--accent)}
.card-wide p{max-width:62ch}
@media(max-width:760px){.card-wide .card-wide-body{flex-direction:column;align-items:flex-start;gap:24px}}

/* 9. Proces ------------------------------------------------- */
.process{grid-template-columns:repeat(4,1fr)}
.step{position:relative;padding-top:28px;border-top:1px solid var(--line)}
.step .num{font-family:'Bricolage Grotesque';font-size:.8rem;color:var(--accent);margin-bottom:18px}
.step h4{font-size:1.15rem;font-weight:600;margin-bottom:10px}
.step p{color:var(--muted);font-size:.92rem}

/* 10. Realizacje -------------------------------------------- */
/*
.work{grid-template-columns:repeat(2,1fr)}
.proj{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:.4s;cursor:pointer}
.proj:hover{transform:translateY(-6px);border-color:#3a3a40}
.proj .thumb{height:260px;position:relative;display:grid;place-items:center;overflow:hidden}
.proj .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,10,11,.5))}
.t1{background:linear-gradient(135deg,#1a2f1a,#0e1a0e)}
.t2{background:linear-gradient(135deg,#1a1f3a,#0e1020)}
.t3{background:linear-gradient(135deg,#2f1a2a,#1a0e16)}
.t4{background:linear-gradient(135deg,#2a2a1a,#16160e)}
.proj .mock{position:relative;z-index:1;width:78%;height:62%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;backdrop-filter:blur(4px);display:flex;flex-direction:column}
.proj .mock .bar{height:26px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:6px;padding:0 12px}
.proj .mock .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.proj .mock .body{flex:1;padding:16px;display:flex;flex-direction:column;gap:9px}
.proj .mock .body span{height:9px;border-radius:4px;background:rgba(255,255,255,.1)}
.proj .mock .body span:nth-child(1){width:60%;background:var(--accent);opacity:.55}
.proj .mock .body span:nth-child(2){width:90%}
.proj .mock .body span:nth-child(3){width:75%}
.proj .info{padding:26px 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.proj .info h4{font-family:'Bricolage Grotesque';font-size:1.25rem;font-weight:600}
.proj .info p{color:var(--muted);font-size:.9rem;margin-top:4px}
.proj .tag{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--accent);border:1px solid var(--accent-dim);padding:5px 10px;border-radius:100px;white-space:nowrap}
*/

/* 11. Statystyki -------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.stat{padding:40px 30px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .big{font-family:'Bricolage Grotesque';font-size:clamp(2.4rem,4vw,3.4rem);font-weight:700;color:var(--accent)}
.stat .lbl{color:var(--muted);font-size:.92rem;margin-top:6px}

/* 12. Opinia ------------------------------------------------ */
.quote{max-width:840px;margin:0 auto;text-align:center}
.quote blockquote{font-family:'Bricolage Grotesque';font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.quote .who{margin-top:32px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.1em}

/* 13. Kontakt ----------------------------------------------- */
.contact-box{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:60px;position:relative;overflow:hidden}
.contact-box .glow-3{width:400px;height:400px;background:rgba(201,242,78,.1);top:-150px;left:30%;position:absolute;border-radius:50%;filter:blur(110px)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;position:relative;z-index:1;align-items:center}
.contact-grid h2{font-family:'Bricolage Grotesque';font-size:clamp(2rem,3.5vw,2.8rem);font-weight:700;line-height:1.05}
.contact-grid p{color:var(--muted);margin-top:18px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font-family:inherit;font-size:.95rem;transition:.25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,242,78,.12)}
.field textarea{resize:vertical;min-height:90px}
.field.has-error input,.field.has-error textarea{border-color:#e05252;box-shadow:0 0 0 3px rgba(224,82,82,.12)}
.field-error{display:block;font-size:.78rem;color:#e05252;margin-top:6px;min-height:1em}
.field-optional{font-size:.75rem;color:var(--muted-2);font-weight:400}
.form-success-box{display:flex;align-items:flex-start;gap:18px;background:rgba(201,242,78,.07);border:1px solid rgba(201,242,78,.25);border-radius:16px;padding:28px}
.form-success-box strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:6px}
.form-success-box p{color:var(--muted);font-size:.9rem;margin:0}
.form-success-icon{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#0a0a0b;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0}

/* 14. Stopka ------------------------------------------------ */
footer{border-top:1px solid var(--line);padding:60px 0 40px;margin-top:40px}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-col h5{font-size:.78rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-family:'JetBrains Mono',monospace}
.foot-col a{display:block;color:var(--muted);margin-bottom:10px;font-size:.95rem;transition:.2s}
.foot-col a:hover{color:var(--accent)}
.foot-brand{max-width:280px}
.foot-brand p{color:var(--muted);font-size:.92rem;margin-top:14px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:30px;color:var(--muted-2);font-size:.85rem}

/* 15. Responsywność ----------------------------------------- */
@media(max-width:900px){
  .services,.process,.work,.stats,.contact-grid,.foot-top{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .nav-links{display:none}
  .contact-box{padding:36px 26px}
  .sec-pad{padding:80px 0}
}