/* negocjacje.site — Editorial / Sharp redesign */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FAFAF7;
  --bg-dark:#1a1a2e;
  --text:#1a1a1a;
  --text-light:#E8E4DD;
  --muted:#555;
  --accent:#2A7AB5;
  --accent-hover:#1e5a8a;
  --gold:#C9A280;
  --gold-hover:#b8914f;
  --card-bg:#fff;
  --border:#e5e5e5;
  --max-w:720px;
  --font-body:'Exo 2',system-ui,-apple-system,sans-serif;
  --font-display:'Libre Baskerville',Georgia,serif;
  --cat-analiza:#2A7AB5;
  --cat-strategia:#2D6A4F;
  --cat-psychologia:#7B2D8B;
  --cat-praktyka:#C25700;
  --cat-rynek:#8B5E3C;
}

html{font-size:17px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased}

/* Focus visible — a11y */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

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

/* Header */
header{border-bottom:2px solid var(--accent);padding:1rem 0;position:sticky;top:0;z-index:100;background:var(--bg)}
header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.logo{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.logo:hover{text-decoration:none}
header nav a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;margin-left:1.5rem;transition:color .2s}
header nav a:hover{color:var(--accent);text-decoration:none}

/* ========================================
   HERO — dark, left-aligned, editorial
   ======================================== */
.hero{
  background:var(--bg-dark);
  padding:4rem 0;
  position:relative;
  overflow:hidden;
}

/* Grain overlay */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:256px 256px;
  opacity:0.5;
  pointer-events:none;
}

/* Subtle color accents */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(42,122,181,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(201,162,128,0.08) 0%, transparent 55%);
  pointer-events:none;
}

.hero h1{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
  line-height:1.25;
  color:#fff;
  margin-bottom:0;
  position:relative;
  animation:hero-fade-up 0.7s ease-out 0.1s both;
}

.hero-accent-line{
  display:block;
  width:60px;
  height:3px;
  background:var(--gold);
  border-radius:2px;
  margin:1.2rem 0;
  animation:accent-grow 0.8s ease-out 0.5s both;
}

@keyframes accent-grow{
  from{width:0;opacity:0}
  to{width:60px;opacity:1}
}

.hero p{
  color:var(--text-light);
  font-size:1rem;
  max-width:540px;
  opacity:0.9;
  position:relative;
  animation:hero-fade-up 0.7s ease-out 0.3s both;
}

.hero .hero-tagline{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
  position:relative;
  animation:hero-fade-up 0.7s ease-out 0s both;
}

@keyframes hero-fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ========================================
   TEST BANNER
   ======================================== */
.test-banner{position:relative;overflow:hidden;border-radius:10px;margin:2rem 0;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--bg-dark)}
.test-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .3s ease}
.test-banner:hover img{opacity:.4}
.test-banner .overlay{position:relative;z-index:1;padding:2.5rem 1.5rem}
.test-banner h3{color:#fff;font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:.35rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.test-banner p{color:rgba(255,255,255,.9);font-size:.95rem;margin-bottom:1.2rem;text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ========================================
   ARTICLES — borderless editorial cards
   ======================================== */
.articles{padding:2rem 0 4rem}

.article-card{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  border-radius:0;
  padding:1.75rem 0;
  margin-bottom:0;
  transition:background .2s ease;
}

.article-card:last-child{border-bottom:none}

.article-card:hover{
  background:rgba(42,122,181,.02);
}

.article-card h2{
  font-family:var(--font-display);
  font-size:1.15rem;
  margin-bottom:.5rem;
  line-height:1.35;
}
.article-card h2 a{color:var(--text);text-decoration:none;transition:color .2s}
.article-card h2 a:hover{color:var(--accent)}
.article-card .meta{font-size:.8rem;color:var(--muted);margin-bottom:.6rem}
.article-card .excerpt{font-size:.92rem;color:#444;line-height:1.6}

/* Category-colored tags */
.tag{
  display:inline-block;
  color:#fff;
  font-size:.7rem;
  font-weight:600;
  padding:.15rem .5rem;
  border-radius:3px;
  margin-right:.4rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--accent);
}
.tag--analiza{background:var(--cat-analiza)}
.tag--strategia{background:var(--cat-strategia)}
.tag--psychologia{background:var(--cat-psychologia)}
.tag--praktyka{background:var(--cat-praktyka)}
.tag--rynek{background:var(--cat-rynek)}

/* Article card staggered fade-in */
.article-card{
  opacity:0;
  transform:translateY(10px);
  animation:fade-in-up .5s ease-out forwards;
}
.article-card:nth-child(1){animation-delay:.05s}
.article-card:nth-child(2){animation-delay:.1s}
.article-card:nth-child(3){animation-delay:.15s}
.article-card:nth-child(4){animation-delay:.2s}
.article-card:nth-child(5){animation-delay:.25s}

@keyframes fade-in-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ========================================
   ARTICLE PAGE
   ======================================== */
.article-header{padding:2.5rem 0 1rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
.article-header h1{font-family:var(--font-display);font-size:1.6rem;line-height:1.35;margin-bottom:.5rem}
.article-header .meta{font-size:.85rem;color:var(--muted)}
.article-body{padding-bottom:3rem}
.article-body p{margin-bottom:1.2rem}
.article-body h2{font-family:var(--font-display);font-size:1.2rem;font-weight:700;margin:2.5rem 0 .75rem;color:var(--text);padding-bottom:.4rem;border-bottom:2px solid var(--border)}
.article-body h3{font-size:1.05rem;font-weight:600;margin:1.5rem 0 .5rem}
.article-body ul,.article-body ol{margin:0 0 1.2rem 1.5rem}
.article-body li{margin-bottom:.4rem}
.article-body blockquote{border-left:3px solid var(--gold);padding:.75rem 1rem;margin:1.5rem 0;background:rgba(201,162,128,.06);font-style:italic;color:#444}
.article-body a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.article-body a:hover{color:var(--accent-hover)}
.article-body strong{font-weight:600}

/* CTA box */
.cta-box{background:var(--card-bg);border:2px solid var(--accent);border-radius:8px;padding:1.75rem;margin:2rem 0;text-align:center}
.cta-box h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.5rem}
.cta-box p{font-size:.9rem;color:var(--muted);margin-bottom:1rem}

/* CTA button — no !important */
.cta-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:.9rem;padding:.65rem 1.5rem;border-radius:5px;text-decoration:none;transition:background .2s,transform .15s}
a.cta-btn,a.cta-btn:visited,a.cta-btn:active{color:#fff;text-decoration:none}
.cta-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* Test banner CTA override */
.test-banner .cta-btn{background:var(--gold);color:#1a1a1a;font-size:.95rem;padding:.7rem 2rem;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.test-banner a.cta-btn,.test-banner a.cta-btn:visited{color:#1a1a1a}
.test-banner .cta-btn:hover{background:var(--gold-hover)}

/* ========================================
   FOOTER
   ======================================== */
footer{border-top:1px solid var(--border);padding:1.5rem 0;text-align:center;font-size:.8rem;color:var(--muted)}
.footer-links{margin-bottom:.5rem}
.footer-links a{color:var(--muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--accent)}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ========================================
   RESPONSIVE
   ======================================== */
@media(min-width:640px){
  .hero{padding:5rem 0}
  .hero h1{font-size:2.4rem}
  .article-header h1{font-size:2rem}
}

@media(min-width:900px){
  .container{max-width:760px}
  .hero h1{font-size:2.7rem}
  .article-header h1{font-size:2.2rem}
}

@media(max-width:600px){
  html{font-size:16px}
  .hero h1{font-size:1.5rem}
  .article-card{padding:1.25rem 0}
  header .container{justify-content:center;text-align:center}
  header nav{width:100%;text-align:center}
  header nav a{margin:0 .75rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Print */
@media print{
  .hero,.test-banner,.cta-box,.cta-btn{display:none}
  header{position:static;border-bottom:1px solid #000}
  body{font-size:12pt}
  a{color:var(--text)}
}