:root {
  --brand-navy: #0a1533;
  --brand-navy-2: #132653;
  --brand-cobalt: #315ff4;
  --brand-cobalt-2: #244bd4;
  --brand-mint: #21b984;
  --brand-mint-dark: #0c7450;
  --brand-ink: #172033;
  --brand-muted: #657086;
  --brand-bg: #f5f7fb;
  --brand-panel: #ffffff;
  --brand-line: #dfe5ef;
  --brand-blue-soft: #edf3ff;
  --brand-green-soft: #eaf8f2;
  --brand-focus: rgba(49, 95, 244, .34);
  --brand-shadow-sm: 0 10px 28px rgba(10, 21, 51, .07);
  --brand-shadow-md: 0 20px 52px rgba(10, 21, 51, .10);
  --brand-radius-sm: 12px;
  --brand-radius-md: 18px;
  --brand-radius-lg: 26px;

  /* Kompatybilność z istniejącymi powierzchniami. */
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --soft: var(--brand-bg);
  --line: var(--brand-line);
  --panel: var(--brand-panel);
  --navy: var(--brand-navy);
  --navy-2: var(--brand-navy-2);
  --blue: var(--brand-cobalt);
  --blue-soft: var(--brand-blue-soft);
  --green: var(--brand-mint-dark);
  --green-soft: var(--brand-green-soft);
  --shadow: var(--brand-shadow-sm);
}

html {
  color-scheme: light;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(49, 95, 244, .045), transparent 30rem),
    var(--brand-bg);
  color: var(--brand-ink);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline-color: var(--brand-focus);
}

/*
  Znak KLUBIGO:
  - K = klub,
  - punkt = konkretny cel,
  - kierunkowy cień = ruch od celu do wyniku.
  Znak pozostaje czysto typograficzny/CSS, dzięki czemu działa bez zewnętrznych plików.
*/
.brand-mark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--brand-navy) 8%, var(--brand-cobalt) 115%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(10, 21, 51, .18);
  font-weight: 900;
  letter-spacing: -.055em;
}

.brand-mark::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  right: -31%;
  top: -34%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  z-index: -1;
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-mint);
  box-shadow: 0 0 0 3px rgba(33, 185, 132, .17);
}

.brand-copy strong,
.brand > div > strong {
  color: inherit;
  font-weight: 900;
  letter-spacing: .075em;
}

.brand-copy small,
.brand > div > span {
  letter-spacing: .01em;
}

/* Jedna hierarchia działania: główne = granat/kobalt, drugorzędne = białe. */
.primary-button,
.primary-link,
.task-button.primary,
.nav-cta {
  border-color: var(--brand-navy);
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2));
  color: #fff;
  box-shadow: 0 10px 22px rgba(10, 21, 51, .13);
}

.primary-button:hover,
.primary-link:hover,
.task-button.primary:hover,
.nav-cta:hover {
  background: linear-gradient(135deg, var(--brand-navy-2), var(--brand-cobalt-2));
}

.free-chip,
.progress-badge,
.mode-chip {
  font-weight: 800;
}

.section-label,
.eyebrow,
.step-kicker {
  letter-spacing: .075em;
}

/* Marketing: bardziej premium, mniej wyglądu „generatora landing page”. */
.marketing-header,
.site-header {
  backdrop-filter: blur(10px);
}

.marketing-hero .hero-copy h1,
.hero-copy h1,
.page-intro h2,
.section-heading h2,
.final-cta h2,
.scan-banner h2 {
  text-wrap: balance;
}

.director-card,
.promise-card,
.pricing-card,
.scan-shell,
.result-shell,
.panel,
.goal-hero {
  box-shadow: var(--brand-shadow-sm);
}

.director-card,
.pricing-card,
.scan-shell,
.result-shell,
.goal-hero {
  border-color: var(--brand-line);
}

.scan-banner,
.insight-panel,
.sidebar,
.promise-card {
  background-image: linear-gradient(145deg, var(--brand-navy), var(--brand-navy-2));
}

/* Akcent „wynik” używany oszczędnie, nie jako kolor całego interfejsu. */
.topbar-status,
.progress-badge,
.free-chip {
  color: var(--brand-mint-dark);
}

.status-light,
.ai-action-dot {
  background: var(--brand-mint);
}

/* Mobilnie znak pozostaje czytelny i nie konkuruje z najważniejszym CTA. */
@media (max-width: 760px) {
  .brand-mark {
    border-radius: 12px;
  }
}

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