/* panek.phd — statyczna implementacja systemu wizualnego (tokeny z src/index.css builda React) */

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --muted: 40 9% 91%;
  --muted-foreground: 40 3% 42%;
  --border: 40 9% 91%;
  --off-white: 40 9% 97%;
  --charcoal: 220 25% 10%;
  --sage: 220 55% 28%;        /* granat — historyczna nazwa tokenu */
  --sage-light: 220 50% 38%;
  --sage-glow: 220 60% 50%;
  --navy: 220 60% 22%;
  --linkedin: 210 96% 40%;
  --gradient-from: 38 72% 58%;
  --gradient-to: 28 85% 45%;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --shadow-glass: 0 8px 32px 0 rgba(0,0,0,.06);
  --shadow-glass-lg: 0 16px 48px 0 rgba(0,0,0,.08);
  --glow: 0 0 60px -15px hsl(var(--sage-glow) / .3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem; }
p { margin: 0 0 1.25rem; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: hsl(var(--sage) / .2); color: hsl(var(--foreground)); }

.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 3px; color: hsl(var(--sage)); margin-bottom: 1.5rem;
}
.tag-on-dark { color: hsl(var(--gradient-from)); }

.gradient-text {
  background: linear-gradient(135deg, hsl(var(--gradient-from)), hsl(var(--gradient-to)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.glass-card {
  background: hsl(0 0% 100% / .6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid hsl(0 0% 100% / .2);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-glass);
  padding: 2rem;
  transition: box-shadow .5s ease, transform .3s ease;
}
.glass-card:hover { box-shadow: var(--shadow-glass-lg); transform: translateY(-6px); }

.section { padding: 6rem 0; position: relative; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }
.section-rule {
  max-width: 600px; height: 1px; margin: 0 auto 5rem;
  background: linear-gradient(90deg, transparent, hsl(var(--sage) / .35), transparent);
}
.section-lede { max-width: 540px; color: hsl(var(--muted-foreground)); font-size: 1rem; margin-bottom: 3rem; }
.section h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1rem; }

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  border-radius: 999px; padding: 1rem 2rem;
  font-size: .8rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; transition: all .3s ease; border: 1px solid transparent; cursor: pointer;
}
.btn .arrow { transition: transform .3s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-solid { background: hsl(var(--foreground)); color: hsl(var(--background)); box-shadow: var(--shadow-glass-lg); }
.btn-solid:hover { background: hsl(var(--sage)); box-shadow: var(--glow); transform: scale(1.04); }
.btn-ghost { border-color: hsl(var(--foreground) / .2); color: hsl(var(--foreground)); }
.btn-ghost:hover { border-color: hsl(var(--sage)); background: hsl(var(--sage)); color: #fff; transform: scale(1.04); }
.btn-ghost-on-dark { border: 1px solid hsl(0 0% 100% / .25); color: #fff; }
.btn-ghost-on-dark:hover { background: #fff; color: hsl(var(--charcoal)); transform: scale(1.04); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.cta-row.center { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .5s ease, box-shadow .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.header-inner { max-width: 1200px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 1.5rem; }
.logo { height: 48px; width: auto; }
.logo-on-light { display: none; }
.site-nav { display: flex; align-items: center; gap: 2.2rem; }
.site-nav a {
  position: relative; font-size: .8rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; color: hsl(0 0% 100% / .7); transition: color .3s ease; padding-bottom: 4px;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: linear-gradient(90deg, hsl(var(--sage)), hsl(var(--sage-glow))); transition: width .3s ease;
}
.site-nav a:hover { color: #fff; }
.site-nav a:hover::after { width: 100%; }
.header-linkedin { color: hsl(0 0% 100% / .6); display: flex; }
.header-linkedin:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; color: #fff; transition: transform .3s; }

.site-header.scrolled {
  background: hsl(0 0% 100% / .75);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-color: hsl(var(--border) / .5);
  box-shadow: var(--shadow-glass);
}
.site-header.scrolled .site-nav a { color: hsl(var(--foreground) / .6); }
.site-header.scrolled .site-nav a:hover { color: hsl(var(--foreground)); }
.site-header.scrolled .logo-on-dark { display: none; }
.site-header.scrolled .logo-on-light { display: block; }
.site-header.scrolled .header-linkedin { color: hsl(var(--foreground) / .4); }
.site-header.scrolled .header-linkedin:hover { color: hsl(var(--linkedin)); }
.site-header.scrolled .nav-toggle span { color: hsl(var(--foreground)); background: currentColor; }

@media (max-width: 899px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.5rem;
    background: hsl(0 0% 100% / .92); backdrop-filter: blur(20px);
    box-shadow: var(--shadow-glass-lg);
  }
  .site-nav.open { display: flex; }
  .site-nav a, .site-header .site-nav a { color: hsl(var(--foreground) / .7); }
  .header-linkedin { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 80px; color: #fff; }
.hero-bg { position: absolute; inset: 0; background: url('/assets/background.webp') center / cover no-repeat; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, hsl(var(--charcoal) / .85), hsl(var(--charcoal) / .55) 50%, hsl(var(--charcoal) / .35));
}
.hero-inner { position: relative; display: grid; gap: 3rem; align-items: center; padding-top: 4rem; }
@media (min-width: 768px) { .hero-inner { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.hero-rule { width: 48px; height: 2px; margin-bottom: 2rem; background: linear-gradient(90deg, hsl(var(--sage)), hsl(var(--sage-glow))); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.1; margin-bottom: 2rem; color: #fff; }
.hero-lede { max-width: 500px; font-size: 1.1rem; color: hsl(0 0% 100% / .7); }
.hero-quote {
  margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid hsl(var(--sage-glow));
  font-family: var(--font-serif); font-style: italic; line-height: 1.9; color: hsl(0 0% 100% / .7);
}
.hero-quote footer { margin-top: 1rem; font-family: var(--font-mono); font-style: normal; font-size: .7rem; letter-spacing: 2px; color: hsl(0 0% 100% / .4); }
.hero-photo { align-self: end; }
.hero-photo img { display: block; width: 88%; margin-inline: auto; filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }
@media (max-width: 767px) { .hero-photo { order: -1; } .hero-photo img { width: 60%; } }

/* ---------- przełącznik audiencji (P-3) ---------- */
.audience-bar {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding-block: 2.5rem 3rem;
}
.audience-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: hsl(0 0% 100% / .55); }
.audience-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px;
  border-radius: 999px; background: hsl(0 0% 100% / .1);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsl(0 0% 100% / .18);
}
.audience-tabs [role="tab"] {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 0; border-radius: 999px; padding: .8rem 2rem; cursor: pointer;
  background: transparent; color: hsl(0 0% 100% / .75);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.audience-tabs [role="tab"] .tab-sub { font-family: var(--font-sans); font-size: .65rem; letter-spacing: .5px; text-transform: none; opacity: .65; }
.audience-tabs [role="tab"][aria-selected="true"] { background: hsl(var(--navy)); color: #fff; box-shadow: inset 0 0 0 1px hsl(var(--sage-glow) / .4), var(--shadow-glass); }
.audience-tabs [role="tab"]:not([aria-selected="true"]):hover { color: #fff; }

/* ---------- sekcje ścieżek ---------- */
.path-section { padding: 6rem 0; }
@media (min-width: 768px) { .path-section { padding: 7rem 0; } }
.path-section h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.path-section[hidden] { display: none; }
#consulting { background: hsl(var(--background)); }
#teaching { background: hsl(var(--off-white)); }

.complementarity-note {
  max-width: 720px; margin-top: 3rem; padding: 1.5rem 2rem;
  border-left: 2px solid hsl(var(--sage)); background: hsl(var(--off-white));
  border-radius: 0 1rem 1rem 0; color: hsl(var(--muted-foreground)); font-size: .95rem;
}
#teaching .complementarity-note { background: hsl(var(--background)); }

.flagship-panel {
  margin-top: 3rem; padding: clamp(2rem, 5vw, 3.5rem); border-radius: 1.5rem;
  background: linear-gradient(180deg, hsl(var(--charcoal)), hsl(var(--foreground)));
  color: #fff; box-shadow: var(--shadow-glass-lg);
}
.flagship-title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; }
.flagship-lede { max-width: 560px; color: hsl(0 0% 100% / .55); margin-bottom: 3rem; }
.dark-card {
  border: 1px solid hsl(0 0% 100% / .08); background: hsl(0 0% 100% / .05);
  border-radius: 1.5rem; padding: 2rem; backdrop-filter: blur(4px);
  transition: border-color .5s ease, background .5s ease, transform .3s ease;
}
.dark-card:hover { border-color: hsl(0 0% 100% / .2); background: hsl(0 0% 100% / .1); transform: translateY(-6px); }
.dark-card h4 { color: #fff; font-size: 1.2rem; }
.dark-card p { color: hsl(0 0% 100% / .5); font-size: .9rem; margin: 0; }
.dark-card .card-num { color: hsl(0 0% 100% / .25); }
.flagship-panel .btn { margin-top: 2.5rem; }

.teaching-facts { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .teaching-facts { grid-template-columns: repeat(3, 1fr); } }
.teaching-facts h4 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: .5rem; }
.teaching-facts p { color: hsl(var(--muted-foreground)); font-size: .92rem; margin: 0; }

/* ---------- siatki kart ---------- */
.card-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .card-grid.three, .card-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .card-grid.three { grid-template-columns: repeat(3, 1fr); }
  .card-grid.four { grid-template-columns: repeat(4, 1fr); }
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.card-num { font-family: var(--font-mono); font-size: .85rem; color: hsl(var(--muted-foreground) / .4); }
.glass-card h3 { font-size: 1.25rem; transition: color .3s ease; }
.glass-card:hover h3 { color: hsl(var(--sage)); }
.glass-card p { color: hsl(var(--muted-foreground)); font-size: .9rem; margin: 0; }
.pillar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 1rem; background: hsl(var(--sage) / .08); color: hsl(var(--sage));
}
.pillar-icon svg { width: 24px; height: 24px; }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1.15fr; gap: 5rem; } }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.5rem; box-shadow: var(--shadow-glass-lg); }
.about-copy p { color: hsl(var(--muted-foreground)); margin-bottom: 1.8rem; }
.about-copy strong { color: hsl(var(--foreground)); font-weight: 600; }

/* ---------- trust bar ---------- */
.trustbar { padding: 4rem 0 5rem; }
.trust-label { text-align: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 2.5rem; }
.trust-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.trust-card {
  width: 200px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
  padding: 1.25rem; text-align: center; border-radius: 1rem;
}
.trust-card:hover { transform: translateY(-4px); }
.trust-card img { height: 3.3rem; width: auto; object-fit: contain; filter: grayscale(1); transition: filter .5s ease; }
.trust-card:hover img { filter: grayscale(0); }
.trust-card span { font-size: .7rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }

/* ---------- blog ---------- */
.post-card { display: flex; flex-direction: column; }
.post-cat {
  align-self: flex-start; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px;
  background: hsl(var(--sage) / .08); color: hsl(var(--sage));
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
}
.post-card h3 { font-size: 1.15rem; line-height: 1.35; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: hsl(var(--sage)); }
.post-date { font-family: var(--font-mono); font-size: .65rem; color: hsl(var(--muted-foreground) / .6); margin-bottom: 1rem; display: block; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.contact-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.contact-ctas .btn { width: 100%; justify-content: space-between; }
@media (min-width: 768px) { .contact-ctas .btn { width: auto; min-width: 420px; } }
.contact-note { font-size: .85rem; color: hsl(var(--muted-foreground)); margin-top: .5rem; }
.contact-note a { color: hsl(var(--sage)); text-decoration: none; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; }
.detail { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.detail a { color: hsl(var(--foreground)); text-decoration: none; }
.detail a:hover { color: hsl(var(--sage)); }
.detail-label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: 2px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

/* ---------- footer ---------- */
.site-footer { background: hsl(var(--foreground)); color: hsl(var(--background)); padding: 5rem 0 2rem; margin-top: 4rem; }
.footer-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-logo { height: 48px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: .875rem; color: hsl(0 0% 100% / .4); max-width: 280px; }
.footer-col h4 { font-family: var(--font-mono); font-size: .65rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: hsl(0 0% 100% / .4); margin-bottom: 1.4rem; }
.footer-col a { display: block; font-size: .875rem; color: hsl(0 0% 100% / .5); text-decoration: none; margin-bottom: .8rem; transition: color .3s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid hsl(0 0% 100% / .1);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: 1px; color: hsl(0 0% 100% / .3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

/* ---------- animacje wejścia ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.visible { opacity: 1; transform: none; }
}

/* Bez JS obie ścieżki są widoczne (hidden nadaje dopiero skrypt). */