/* ========================================
   PIK_AI — Design Tokens & Reset
   v3.0 — Light Theme Redesign
   ======================================== */

/* --- Font Face --- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+0100-017F;
}

/* --- CSS Custom Properties --- */
:root {
  /* === BACKGROUNDS === */
  --bg-dark: #edebec;
  --bg-dark-elevated: #dad7d8;
  --bg-dark-surface: #d0cdce;
  --bg-light: #f5f4f4;
  --bg-light-alt: #faf9f9;
  --bg-white: #ffffff;

  /* === TEXT === */
  --text-on-dark: #1a1a1a;
  --text-on-dark-muted: rgba(26, 26, 26, 0.78);
  --text-on-dark-subtle: rgba(26, 26, 26, 0.72);
  --text-on-light: #111111;
  --text-on-light-muted: rgba(17, 17, 17, 0.72);
  --text-on-light-subtle: rgba(17, 17, 17, 0.66);

  /* === ACCENTS (decorative: backgrounds, borders, circles) === */
  --accent-lime: #edfb8c;
  --accent-orange: #ffc096;
  --accent-pink: #fb86b1;
  --accent-purple: #9797ff;
  --accent-turquoise: #00ffa2;
  --accent-blue: #00a8ff;

  /* General-purpose accents (non-training) */
  --accent-amber: #f0c050;
  --accent-coral: #f4a68c;

  /* === ACCENTS — text always dark (only approved palette colors for decoration) === */
  --accent-lime-text: #1a1a1a;
  --accent-purple-text: #1a1a1a;
  --accent-orange-text: #1a1a1a;
  --accent-pink-text: #1a1a1a;
  --accent-turquoise-text: #1a1a1a;
  --accent-blue-text: #1a1a1a;
  --accent-amber-text: #1a1a1a;
  --accent-coral-text: #1a1a1a;

  /* Accent opacity variants */
  --accent-lime-10: rgba(237, 251, 140, 0.12);
  --accent-lime-15: rgba(237, 251, 140, 0.18);
  --accent-lime-25: rgba(237, 251, 140, 0.30);
  --accent-orange-10: rgba(255, 192, 150, 0.12);
  --accent-orange-15: rgba(255, 192, 150, 0.18);
  --accent-pink-10: rgba(251, 134, 177, 0.12);
  --accent-pink-15: rgba(251, 134, 177, 0.18);
  --accent-purple-10: rgba(151, 151, 255, 0.12);
  --accent-purple-15: rgba(151, 151, 255, 0.18);
  --accent-turquoise-10: rgba(0, 255, 162, 0.12);
  --accent-turquoise-15: rgba(0, 255, 162, 0.18);
  --accent-blue-10: rgba(0, 168, 255, 0.12);
  --accent-blue-15: rgba(0, 168, 255, 0.18);
  --accent-amber-10: rgba(240, 192, 80, 0.12);
  --accent-amber-15: rgba(240, 192, 80, 0.18);
  --accent-coral-10: rgba(244, 166, 140, 0.12);
  --accent-coral-15: rgba(244, 166, 140, 0.18);

  /* === SEMANTIC === */
  --color-link: #1a1a1a;
  --color-link-light: #111111;
  --color-focus: var(--accent-purple);
  --color-error: #d93636;
  --color-success: #2d8f4e;

  /* === GLASSMORPHISM — 3 standardized tiers === */
  /* Tier 1: STRONG — prominent elements (navbar, hero cards, featured testimonial) */
  --glass-strong-bg: rgba(255, 255, 255, 0.70);
  --glass-strong-hover: rgba(255, 255, 255, 0.82);
  --glass-strong-blur: 20px;

  /* Tier 2: STANDARD — main cards (training, features, bento, stats, testimonials) */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.70);
  --glass-blur: 16px;

  /* Tier 3: SUBTLE — secondary elements (buttons, highlights, overlays) */
  --glass-subtle-bg: rgba(255, 255, 255, 0.38);
  --glass-subtle-hover: rgba(255, 255, 255, 0.55);
  --glass-subtle-blur: 12px;

  /* Shared glass properties — border COLOR only (use with: border: 1px solid var(--glass-border)) */
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-hover: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-radius: 20px;

  /* Legacy aliases (backwards compat) */
  --glass-light-bg: var(--glass-strong-bg);
  --glass-light-hover: var(--glass-strong-hover);
  --glass-light-blur: var(--glass-strong-blur);
  --glass-light-border: rgba(255, 255, 255, 0.7);
  --glass-medium-bg: var(--glass-subtle-bg);
  --glass-medium-hover: var(--glass-subtle-hover);
  --glass-medium-blur: var(--glass-subtle-blur);
  --glass-medium-border: rgba(255, 255, 255, 0.7);

  /* === SHADOWS === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow-lime: 0 4px 20px rgba(200, 210, 60, 0.25);
  --shadow-glow-purple: 0 4px 20px rgba(100, 100, 220, 0.2);
  --shadow-glow-orange: 0 4px 20px rgba(220, 140, 80, 0.2);
  --shadow-glow-pink: 0 4px 20px rgba(200, 80, 130, 0.2);
  --shadow-glow-turquoise: 0 4px 20px rgba(0, 200, 130, 0.25);
  --shadow-glow-blue: 0 4px 20px rgba(0, 130, 220, 0.2);
  --shadow-glow-amber: 0 4px 20px rgba(210, 170, 50, 0.25);
  --shadow-glow-coral: 0 4px 20px rgba(220, 130, 100, 0.2);

  /* === MESH GRADIENT BLOBS (stronger on light bg) === */
  --mesh-hero:
    radial-gradient(ellipse at 70% 20%, rgba(151, 151, 255, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(237, 251, 140, 0.10) 0%, transparent 50%);
  --mesh-training:
    radial-gradient(ellipse at 10% 40%, rgba(237, 251, 140, 0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 70%, rgba(151, 151, 255, 0.08) 0%, transparent 45%);
  --mesh-funding:
    radial-gradient(ellipse at 50% 0%, rgba(255, 192, 150, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 100%, rgba(251, 134, 177, 0.08) 0%, transparent 50%);
  --mesh-cta:
    radial-gradient(ellipse at 30% 50%, rgba(237, 251, 140, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(151, 151, 255, 0.10) 0%, transparent 50%);
  --mesh-about:
    radial-gradient(ellipse at 60% 20%, rgba(237, 251, 140, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 70%, rgba(151, 151, 255, 0.08) 0%, transparent 45%);

  /* === TYPOGRAPHY === */
  --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-h1: clamp(2rem, 3.5vw + 0.5rem, 3.2rem);
  --text-h2: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
  --text-h4: 1.25rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-small: 0.875rem;
  --text-caption: 0.875rem;
  --text-overline: 0.875rem;

  /* === SPACING === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-wide: 1400px;
  --gutter: 24px;
  --content-measure: 560px;

  /* === ANIMATION === */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-enter: 600ms;
  --duration-reveal: 800ms;

  /* === RADII === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 100px;

  /* === NAVBAR === */
  --navbar-height: 72px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --text-h4: 1.125rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 20px;
  }
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--bg-light-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* --- Skip Link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-3) var(--space-6);
  background: var(--accent-purple);
  color: #1a1a1a;
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus { top: 0; }

/* --- Focus visible --- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- Selection --- */
::selection {
  background: rgba(151, 151, 255, 0.25);
  color: var(--text-on-light);
}

/* --- SR only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ========================================
   PIK_AI — Layout & Grid
   v3.0 — Light Theme Redesign
   ======================================== */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow {
  max-width: var(--content-measure);
}

.container--wide {
  max-width: var(--container-wide);
}

/* --- Sections --- */
.section {
  position: relative;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

/* Section color modes — all light now */
.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section--dark > * {
  position: relative;
  z-index: 1;
}

/* Mesh gradient variants */
.section--mesh-hero::before    { background: var(--mesh-hero); }
.section--mesh-training::before { background: var(--mesh-training); }
.section--mesh-funding::before  { background: var(--mesh-funding); }
.section--mesh-cta::before      { background: var(--mesh-cta); }
.section--mesh-about::before    { background: var(--mesh-about); }

/* Light sections */
.section--light {
  background-color: var(--bg-light);
  color: var(--text-on-light);
}

.section--light-alt {
  background-color: var(--bg-light-alt);
  color: var(--text-on-light);
}

.section--white {
  background-color: var(--bg-white);
  color: var(--text-on-light);
}

/* --- Section Header --- */
.section__header {
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .section__header {
    margin-bottom: var(--space-12);
  }
}

.section__header--center {
  text-align: center;
}

.section__header--center .section__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Overline label above title */
.section__overline {
  display: block;
  font-size: var(--text-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

/* Overline colors — dark text + accent left border for differentiation */
.section__overline--lime      { color: var(--text-on-dark); border-left: 3px solid var(--accent-lime); padding-left: var(--space-2); }
.section__overline--purple    { color: var(--text-on-dark); border-left: 3px solid var(--accent-purple); padding-left: var(--space-2); }
.section__overline--orange    { color: var(--text-on-dark); border-left: 3px solid var(--accent-orange); padding-left: var(--space-2); }
.section__overline--pink      { color: var(--text-on-dark); border-left: 3px solid var(--accent-pink); padding-left: var(--space-2); }
.section__overline--turquoise { color: var(--text-on-dark); border-left: 3px solid var(--accent-turquoise); padding-left: var(--space-2); }
.section__overline--blue      { color: var(--text-on-dark); border-left: 3px solid var(--accent-blue); padding-left: var(--space-2); }
.section__overline--amber     { color: var(--text-on-dark); border-left: 3px solid var(--accent-amber); padding-left: var(--space-2); }
.section__overline--coral     { color: var(--text-on-dark); border-left: 3px solid var(--accent-coral); padding-left: var(--space-2); }

.section__title {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  color: var(--text-on-light);
}

.section__title--h3 { font-size: var(--text-h3); }

/* Accent word inside title — dark text + accent underline decoration */
.section__title .accent-lime      { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-lime); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-purple    { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-purple); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-orange    { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-orange); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-pink      { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-pink); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-turquoise { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-turquoise); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-blue      { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-blue); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-amber     { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-amber); text-underline-offset: 4px; text-decoration-thickness: 3px; }
.section__title .accent-coral     { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-coral); text-underline-offset: 4px; text-decoration-thickness: 3px; }

.section__subtitle {
  font-size: var(--text-body);
  line-height: 1.6;
  max-width: var(--content-measure);
  color: var(--text-on-light-muted);
}

/* --- Grid --- */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { gap: var(--space-5); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Bento Grid --- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(160px, auto);
  }
  .bento--span-2 { grid-column: span 2; }
  .bento--tall { grid-row: span 2; }
}

/* --- Two column split --- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .split--55-45 {
    grid-template-columns: 55fr 45fr;
  }
  .split--60-40 {
    grid-template-columns: 3fr 2fr;
  }
  .split--40-60 {
    grid-template-columns: 2fr 3fr;
  }
}

/* --- Asymmetric testimonials layout --- */
.testimonials-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .testimonials-layout {
    grid-template-columns: 1.5fr 1fr;
  }
}

.testimonials-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* --- Vertical Timeline --- */
.timeline {
  position: relative;
  padding-left: 44px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    #e05a5a 0%,
    #d4884a 25%,
    #c4a83a 50%,
    #6aad4a 75%,
    #2e8b3e 100%
  );
  opacity: 0.45;
  border-radius: 1px;
}

.timeline__step {
  position: relative;
  padding-bottom: var(--space-8);
}

.timeline__step:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: -44px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--bg-light);
  z-index: 1;
}

.timeline__dot--purple    { background: var(--accent-purple); }
.timeline__dot--lime      { background: var(--accent-lime); }
.timeline__dot--orange    { background: var(--accent-orange); }
.timeline__dot--pink      { background: var(--accent-pink); }
.timeline__dot--turquoise { background: var(--accent-turquoise); }
.timeline__dot--blue      { background: var(--accent-blue); }
.timeline__dot--amber     { background: var(--accent-amber); }
.timeline__dot--coral     { background: var(--accent-coral); }

.timeline__overline {
  font-size: var(--text-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
  border-left: 3px solid currentColor;
  padding-left: 8px;
}

.timeline__title {
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--text-on-light);
}

.timeline__desc {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  overflow: hidden;
  padding-top: calc(var(--navbar-height) + var(--space-10));
  padding-bottom: var(--space-10);
}

/* Hero 3D glass canvas — covers entire hero section */
#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 767px) {
  #hero-canvas {
    opacity: 0.6;
  }
}

/* Hero mesh background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mesh-hero);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .hero { min-height: 90vh; }
}

@media (min-width: 1024px) {
  .hero { min-height: 100vh; }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 55fr 45fr;
  }
}

.hero__content {
  max-width: 600px;
}

.hero__overline {
  display: block;
  font-size: var(--text-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-on-dark);
  border-left: 3px solid var(--accent-lime);
  padding-left: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero__overline--lime      { border-left-color: var(--accent-lime); }
.hero__overline--orange    { border-left-color: var(--accent-orange); }
.hero__overline--pink      { border-left-color: var(--accent-pink); }
.hero__overline--turquoise { border-left-color: var(--accent-turquoise); }
.hero__overline--purple    { border-left-color: var(--accent-purple); }
.hero__overline--blue      { border-left-color: var(--accent-blue); }

.hero__title {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  color: var(--text-on-light);
}

.hero__title .accent {
  color: var(--text-on-light);
  text-decoration: underline;
  text-decoration-color: var(--accent-lime);
  text-underline-offset: 4px;
  text-decoration-thickness: 3px;
}

.hero__title--sm {
  font-size: var(--text-h1);
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: var(--text-body);
  color: var(--text-on-light-muted);
  line-height: 1.6;
  margin-bottom: var(--space-8);
  max-width: 480px;
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .hero__cta-group { flex-direction: row; }
}

.hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
}

.hero__social-proof .stars {
  color: var(--text-on-dark);
  letter-spacing: 2px;
}

/* Hero floating visual (right side) */
.hero__visual {
  display: none;
}

@media (min-width: 768px) {
  .hero__visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-6);
  }
}
@media (min-width: 1024px) {
  .hero__visual {
    padding-left: var(--space-8);
  }
}

.hero__float-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--glass-strong-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-strong-blur));
  -webkit-backdrop-filter: blur(var(--glass-strong-blur));
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  padding-right: var(--space-8);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  will-change: transform;
  transition: background var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
  cursor: pointer;
  position: relative;
}

.hero__float-card::after {
  content: '\2192';
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
  color: var(--text-on-light-muted);
}

.hero__float-card:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}

.hero__float-card:hover {
  background: var(--glass-strong-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), var(--glass-highlight);
}

/* Static translateX offsets — animation keyframes include these */
.hero__float-card:nth-child(1) { transform: translateX(20px); }
.hero__float-card:nth-child(2) { transform: translateX(-10px); }
.hero__float-card:nth-child(3) { transform: translateX(30px); }
.hero__float-card:nth-child(4) { transform: translateX(5px); }
.hero__float-card:nth-child(5) { transform: translateX(-15px); }
.hero__float-card:nth-child(6) { transform: translateX(25px); }

/* 2-kolumnowy układ hero: "Z dofinansowaniem" | "Komercyjne" — dynamicznie z bazy. */
@media (min-width: 768px) {
  .hero__visual.hero__visual--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
    padding-left: 0;
    align-items: start;
    flex-direction: initial;
  }
}
@media (min-width: 1024px) {
  .hero__visual.hero__visual--split {
    gap: var(--space-4);
    padding-left: var(--space-3);
  }
}
.hero__visual-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.hero__visual-col__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  border-left: 3px solid currentColor;
  padding-left: 10px;
  margin-bottom: var(--space-2);
  line-height: 1.2;
}
.hero__visual-col__scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: calc(6 * 92px); /* ~6 kart widocznych, reszta przewija */
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
/* Fade na dole tylko gdy jest ukryta dalsza zawartość (JS dodaje klasę) */
.hero__visual-col__scroll.is-overflowing-bottom {
  mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
}
.hero__visual-col__scroll.is-overflowing-bottom.is-scrolled-end {
  mask-image: none;
  -webkit-mask-image: none;
}
.hero__visual-col__scroll::-webkit-scrollbar { width: 4px; }
.hero__visual-col__scroll::-webkit-scrollbar-track { background: transparent; }
.hero__visual-col__scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; }
.hero__visual--split .hero__float-card {
  transform: none !important;
  animation: none !important;
  padding: 14px 18px;
  padding-right: 36px;
  border-radius: var(--radius-lg);
}
.hero__visual--split .hero__float-card__overline {
  font-size: 11px;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
  padding-left: 8px;
  border-left-width: 3px;
}
.hero__visual--split .hero__float-card__title {
  font-size: 16px;
  line-height: 1.25;
}
.hero__float-card--empty {
  opacity: 0.5;
  pointer-events: none;
  text-align: center;
}

.hero__float-card__overline {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  border-left: 3px solid currentColor;
  padding-left: 8px;
}

/* Color variants for overlines (W9: extracted from inline styles) */
.overline--lime      { border-left-color: var(--accent-lime); }
.overline--purple    { border-left-color: var(--accent-purple); }
.overline--orange    { border-left-color: var(--accent-orange); }
.overline--pink      { border-left-color: var(--accent-pink); }
.overline--turquoise { border-left-color: var(--accent-turquoise); }
.overline--blue      { border-left-color: var(--accent-blue); }
.overline--amber     { border-left-color: var(--accent-amber); }
.overline--coral     { border-left-color: var(--accent-coral); }

.hero__float-card__title {
  font-weight: 600;
  font-size: var(--text-body);
}

/* Hero subpage (smaller) */
.hero--sub {
  min-height: auto;
  padding-top: calc(var(--navbar-height) + var(--space-16));
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .hero--sub {
    padding-top: calc(var(--navbar-height) + var(--space-20));
    padding-bottom: var(--space-16);
  }
}

.hero--sub .hero__title {
  font-size: var(--text-h1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --- Spacing & margin utilities (K3: replacing inline styles) --- */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.min-h-160 { min-height: 160px; }
.min-h-180 { min-height: 180px; }
.ml-2 { margin-left: var(--space-2); }

/* Dlaczego PIK_AI — feature title in card-glass (K3: inline h3 styling) */
.card-glass__feature-title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* --- Flex utilities --- */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--column { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-3 { gap: var(--space-3); }
.flex--gap-4 { gap: var(--space-4); }
.flex--gap-6 { gap: var(--space-6); }
.flex--gap-8 { gap: var(--space-8); }

/* --- Text utilities --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.measure { max-width: var(--content-measure); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Oversize stat number --- */
.stat-number {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Stat colors — dark text + accent bottom border */
.stat-number--lime      { color: var(--text-on-light); border-bottom: 4px solid var(--accent-lime); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--purple    { color: var(--text-on-light); border-bottom: 4px solid var(--accent-purple); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--orange    { color: var(--text-on-light); border-bottom: 4px solid var(--accent-orange); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--pink      { color: var(--text-on-light); border-bottom: 4px solid var(--accent-pink); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--turquoise { color: var(--text-on-light); border-bottom: 4px solid var(--accent-turquoise); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--blue      { color: var(--text-on-light); border-bottom: 4px solid var(--accent-blue); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--amber     { color: var(--text-on-light); border-bottom: 4px solid var(--accent-amber); display: inline-block; padding-bottom: var(--space-1); }
.stat-number--coral     { color: var(--text-on-light); border-bottom: 4px solid var(--accent-coral); display: inline-block; padding-bottom: var(--space-1); }

.stat-label {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-1);
  color: var(--text-on-light-muted);
}


/* ========================================
   DECORATIVE ELEMENTS — Brand Identity
   ======================================== */

/* --- Decorative Yellow Circles (crisp, visible) --- */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  contain: strict;
}

.deco-circle--filled {
  background: var(--accent-lime);
  opacity: 0.3;
}

.deco-circle--ring {
  border: 3px solid var(--accent-lime);
  opacity: 0.4;
}

.deco-circle--ring-purple {
  border: 3px solid var(--accent-purple);
  opacity: 0.35;
}

.deco-circle--ring-orange {
  border: 3px solid var(--accent-orange);
  opacity: 0.4;
}

.deco-circle--ring-pink {
  border: 3px solid var(--accent-pink);
  opacity: 0.35;
}

.deco-circle--ring-turquoise {
  border: 3px solid var(--accent-turquoise);
  opacity: 0.35;
}

.deco-circle--ring-blue {
  border: 3px solid var(--accent-blue);
  opacity: 0.35;
}

/* Circle sizes */
.deco-circle--xs { width: 48px; height: 48px; }
.deco-circle--sm { width: 80px; height: 80px; }
.deco-circle--md { width: 160px; height: 160px; }
.deco-circle--lg { width: 300px; height: 300px; }
.deco-circle--xl { width: 500px; height: 500px; }

@media (min-width: 1024px) {
  .deco-circle--sm { width: 100px; height: 100px; }
  .deco-circle--md { width: 200px; height: 200px; }
  .deco-circle--lg { width: 380px; height: 380px; }
  .deco-circle--xl { width: 600px; height: 600px; }
}

/* --- Gradient Orbs (soft background atmosphere) --- */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

.orb--lime {
  background: radial-gradient(circle, rgba(237, 251, 140, 0.30) 0%, rgba(237, 251, 140, 0) 70%);
}

.orb--purple {
  background: radial-gradient(circle, rgba(151, 151, 255, 0.25) 0%, rgba(151, 151, 255, 0) 70%);
}

.orb--orange {
  background: radial-gradient(circle, rgba(255, 192, 150, 0.25) 0%, rgba(255, 192, 150, 0) 70%);
}

.orb--pink {
  background: radial-gradient(circle, rgba(251, 134, 177, 0.22) 0%, rgba(251, 134, 177, 0) 70%);
}

/* Orb sizes */
.orb--sm { width: 200px; height: 200px; }
.orb--md { width: 350px; height: 350px; }
.orb--lg { width: 500px; height: 500px; }
.orb--xl { width: 700px; height: 700px; }

@media (min-width: 1024px) {
  .orb--sm { width: 250px; height: 250px; }
  .orb--md { width: 450px; height: 450px; }
  .orb--lg { width: 650px; height: 650px; }
  .orb--xl { width: 900px; height: 900px; }
}

/* --- Sygnet (jellyfish brand mark) — sharp, no blur --- */
.sygnet {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
}

/* Motion layer: GPU compositing hint for GSAP animations.
   Omit will-change under reduced-motion (no animation runs). */
@media (prefers-reduced-motion: no-preference) {
  .sygnet--hero {
    will-change: transform;
  }
}

.sygnet--hero {
  right: var(--space-6);
  bottom: var(--space-8);
  width: 160px;
}

@media (min-width: 768px) {
  .sygnet--hero {
    width: 220px;
    right: var(--space-10);
    bottom: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .sygnet--hero {
    width: 300px;
  }
}

.sygnet--section {
  width: 120px;
  opacity: 0.06;
}

@media (min-width: 768px) {
  .sygnet--section { width: 180px; }
}

/* --- Hero Brand Bar (large PIK_AI identity) --- */
.hero__brand-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__brand-logo {
  height: 52px;
  width: auto;
}

@media (min-width: 768px) {
  .hero__brand-logo { height: 60px; }
}

@media (min-width: 1024px) {
  .hero__brand-logo { height: 72px; }
}

.hero__brand-divider {
  width: 1px;
  height: 36px;
  background: rgba(0, 0, 0, 0.15);
}

.hero__brand-tagline {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.3;
  max-width: 200px;
}

@media (max-width: 480px) {
  .hero__brand-divider,
  .hero__brand-tagline { display: none; }
}
/* ========================================
   PIK_AI — Components
   v3.0 — Light Theme Redesign
   ======================================== */

/* --- NAVBAR (light) --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  transition: background-color 400ms var(--ease-default),
              box-shadow 400ms var(--ease-default);
}

.navbar--scrolled {
  background-color: var(--glass-strong-bg);
  backdrop-filter: blur(var(--glass-strong-blur));
  -webkit-backdrop-filter: blur(var(--glass-strong-blur));
  box-shadow: var(--glass-shadow);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.navbar__logo {
  display: flex;
  align-items: center;
  height: 56px;
  flex-shrink: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.navbar__logo:hover {
  opacity: 0.75;
}

.navbar__logo img {
  height: 56px;
  width: auto;
}

.navbar__links {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .navbar__links { display: flex; }
}

.navbar__link {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
  transition: color var(--duration-fast) var(--ease-default);
  text-decoration: none;
  padding: var(--space-2) 0;
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--text-on-light);
}

.navbar__link--active {
  color: var(--text-on-light);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-purple);
}

.navbar__cta { display: none !important; }

@media (min-width: 1024px) {
  .navbar__cta {
    display: inline-flex !important;
    padding: 12px 24px;
    min-width: auto;
    font-size: var(--text-small);
  }
}

/* Hamburger */
.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 44px;
  padding: 10px 0;
}

@media (min-width: 1024px) {
  .navbar__hamburger { display: none; }
}

.navbar__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-on-light);
  border-radius: 1px;
  transition: transform var(--duration-normal) var(--ease-default),
              opacity var(--duration-normal) var(--ease-default);
}

.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-default),
              visibility 300ms var(--ease-default);
}

.mobile-menu--open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__link {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--text-on-light);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.mobile-menu__link:hover { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-purple); text-underline-offset: 4px; }

.mobile-menu__cta { margin-top: var(--space-4); }


/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all var(--duration-normal) var(--ease-default);
  white-space: nowrap;
  min-height: 44px;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent-lime) 0%, #d4e875 100%);
  color: #1a1a1a;
  padding: 16px 32px;
  min-width: 180px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(180, 190, 60, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn--primary:hover {
  box-shadow: 0 4px 28px rgba(180, 190, 60, 0.35), 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(180, 190, 60, 0.15);
}

.btn--secondary {
  background: var(--glass-medium-bg);
  color: var(--text-on-light);
  padding: 14px 28px;
  border: 1.5px solid var(--glass-medium-border);
  backdrop-filter: blur(var(--glass-medium-blur));
  -webkit-backdrop-filter: blur(var(--glass-medium-blur));
}

.btn--secondary:hover {
  background: var(--glass-medium-hover);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.btn--ghost {
  background: transparent;
  padding: 0;
  min-width: 0;
  min-height: 0;
  font-weight: 600;
  font-size: var(--text-small);
  border-radius: 0;
  color: var(--text-on-light);
  text-decoration: underline;
  text-decoration-color: var(--accent-purple);
  text-underline-offset: 3px;
}

.btn--ghost .btn__arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.btn--ghost:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Small button variant (W9: extracted from inline styles) */
.btn--sm {
  padding: 10px 20px;
  min-width: auto;
  font-size: var(--text-small);
}

.btn--disabled, .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767px) {
  .btn--primary { width: 100%; min-width: 0; }
}


/* --- BADGE / TAG --- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-overline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  line-height: 1.4;
}

.badge--lime    { background: var(--accent-lime-15); color: var(--text-on-light); border-left: 3px solid var(--accent-lime); }
.badge--purple  { background: var(--accent-purple-15); color: var(--text-on-light); border-left: 3px solid var(--accent-purple); }
.badge--orange  { background: var(--accent-orange-15); color: var(--text-on-light); border-left: 3px solid var(--accent-orange); }
.badge--pink    { background: var(--accent-pink-15); color: var(--text-on-light); border-left: 3px solid var(--accent-pink); }
.badge--turquoise { background: var(--accent-turquoise-15); color: var(--text-on-light); border-left: 3px solid var(--accent-turquoise); }
.badge--blue    { background: var(--accent-blue-15); color: var(--text-on-light); border-left: 3px solid var(--accent-blue); }
.badge--amber   { background: var(--accent-amber-15); color: var(--text-on-light); border-left: 3px solid var(--accent-amber); }
.badge--coral   { background: var(--accent-coral-15); color: var(--text-on-light); border-left: 3px solid var(--accent-coral); }

.badge--lime-solid      { background: var(--accent-lime); color: #1a1a1a; }
.badge--orange-solid    { background: var(--accent-orange); color: #1a1a1a; }
.badge--purple-solid    { background: var(--accent-purple); color: #1a1a1a; }
.badge--pink-solid      { background: var(--accent-pink); color: #1a1a1a; }
.badge--turquoise-solid { background: var(--accent-turquoise); color: #1a1a1a; }
.badge--blue-solid      { background: var(--accent-blue); color: #1a1a1a; }
.badge--amber-solid     { background: var(--accent-amber); color: #1a1a1a; }
.badge--coral-solid     { background: var(--accent-coral); color: #1a1a1a; }

.badge--light {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-on-light-muted);
}


/* --- CARDS — GLASS (frosted white on gray bg) --- */
.card-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  padding: var(--space-8);
  box-shadow: var(--glass-shadow);
  transition: all 300ms var(--ease-default);
  position: relative;
}

@supports (backdrop-filter: blur(1px)) {
  .card-glass {
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .card-glass { background: rgba(255, 255, 255, 0.65); }
}

.card-glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Colored top accent */
.card-glass--accent-lime      { border-top: 2px solid var(--accent-lime); }
.card-glass--accent-purple    { border-top: 2px solid var(--accent-purple); }
.card-glass--accent-orange    { border-top: 2px solid var(--accent-orange); }
.card-glass--accent-pink      { border-top: 2px solid var(--accent-pink); }
.card-glass--accent-turquoise { border-top: 2px solid var(--accent-turquoise); }
.card-glass--accent-blue      { border-top: 2px solid var(--accent-blue); }
.card-glass--accent-amber     { border-top: 2px solid var(--accent-amber); }
.card-glass--accent-coral     { border-top: 2px solid var(--accent-coral); }

.card-glass:hover.card-glass--accent-lime      { box-shadow: var(--shadow-md), var(--shadow-glow-lime); }
.card-glass:hover.card-glass--accent-purple    { box-shadow: var(--shadow-md), var(--shadow-glow-purple); }
.card-glass:hover.card-glass--accent-orange    { box-shadow: var(--shadow-md), var(--shadow-glow-orange); }
.card-glass:hover.card-glass--accent-pink      { box-shadow: var(--shadow-md), var(--shadow-glow-pink); }
.card-glass:hover.card-glass--accent-turquoise { box-shadow: var(--shadow-md), var(--shadow-glow-turquoise); }
.card-glass:hover.card-glass--accent-blue      { box-shadow: var(--shadow-md), var(--shadow-glow-blue); }
.card-glass:hover.card-glass--accent-amber     { box-shadow: var(--shadow-md), var(--shadow-glow-amber); }
.card-glass:hover.card-glass--accent-coral     { box-shadow: var(--shadow-md), var(--shadow-glow-coral); }

/* Inner glass highlight line */
.card-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
}

/* Dashed border variant (StudentAI) */
.card-glass--dashed-purple { border-top: 2px dashed var(--accent-purple); }
.card-glass--dashed-blue   { border-top: 2px dashed var(--accent-blue); }

.card-glass__tag { margin-bottom: var(--space-3); }

.card-glass__title {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  color: var(--text-on-light);
}

.card-glass__desc {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  margin-bottom: var(--space-1);
}

.card-glass__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.card-glass__link { margin-top: auto; }


/* --- CARDS — FEATURE (white on light-alt bg) --- */
.card-feature {
  background: var(--glass-strong-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--glass-shadow);
  /* No backdrop-filter — sits on solid light bg, glass opacity alone is enough */
  transition: all var(--duration-normal) var(--ease-default);
}

/* Card-feature accent borders (W9/K3: extracted from inline styles) */
.card-feature--accent-purple    { border-left: 3px solid var(--accent-purple); }
.card-feature--accent-orange    { border-left: 3px solid var(--accent-orange); }
.card-feature--accent-pink      { border-left: 3px solid var(--accent-pink); }
.card-feature--accent-lime      { border-left: 3px solid var(--accent-lime); }
.card-feature--accent-turquoise { border-left: 3px solid var(--accent-turquoise); }
.card-feature--accent-blue      { border-left: 3px solid var(--accent-blue); }
.card-feature--accent-amber     { border-left: 3px solid var(--accent-amber); }
.card-feature--accent-coral     { border-left: 3px solid var(--accent-coral); }

/* Card-feature top accent (K3: extracted from inline border-top) */
.card-feature--top-purple    { border-top: 2px solid var(--accent-purple); }
.card-feature--top-orange    { border-top: 2px solid var(--accent-orange); }
.card-feature--top-pink      { border-top: 2px solid var(--accent-pink); }
.card-feature--top-lime      { border-top: 2px solid var(--accent-lime); }
.card-feature--top-turquoise { border-top: 2px solid var(--accent-turquoise); }
.card-feature--top-blue      { border-top: 2px solid var(--accent-blue); }
.card-feature--top-amber     { border-top: 2px solid var(--accent-amber); }
.card-feature--top-coral     { border-top: 2px solid var(--accent-coral); }

/* Card-feature heavy top accent (dofinansowanie) */
.card-feature--top-heavy-orange    { border-top: 3px solid var(--accent-orange); }
.card-feature--top-heavy-pink      { border-top: 3px solid var(--accent-pink); }
.card-feature--top-heavy-turquoise { border-top: 3px solid var(--accent-turquoise); }
.card-feature--top-heavy-lime      { border-top: 3px solid var(--accent-lime); }
.card-feature--top-heavy-amber     { border-top: 3px solid var(--accent-amber); }
.card-feature--top-heavy-coral     { border-top: 3px solid var(--accent-coral); }

/* Card-feature layout variants */
.card-feature--centered { text-align: center; padding: var(--space-8); }
.card-feature--flex-col { display: flex; flex-direction: column; }

/* Gradient variant (Efekty section) */
.card-feature--gradient {
  background: linear-gradient(135deg, rgba(151,151,255,0.06), rgba(237,251,140,0.03));
  border-color: rgba(151,151,255,0.12);
}
.card-feature--gradient-amber {
  background: linear-gradient(135deg, rgba(240,192,80,0.06), rgba(237,251,140,0.03));
  border-color: rgba(240,192,80,0.12);
}

.card-feature:hover {
  background: var(--glass-strong-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.card-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
}

.card-feature__icon--lime      { background: var(--accent-lime-15); color: var(--text-on-light); }
.card-feature__icon--purple    { background: var(--accent-purple-15); color: var(--text-on-light); }
.card-feature__icon--orange    { background: var(--accent-orange-15); color: var(--text-on-light); }
.card-feature__icon--pink      { background: var(--accent-pink-15); color: var(--text-on-light); }
.card-feature__icon--turquoise { background: var(--accent-turquoise-15); color: var(--text-on-light); }
.card-feature__icon--blue      { background: var(--accent-blue-15); color: var(--text-on-light); }
.card-feature__icon--amber     { background: var(--accent-amber-15); color: var(--text-on-light); }
.card-feature__icon--coral     { background: var(--accent-coral-15); color: var(--text-on-light); }

.card-feature__title {
  font-size: var(--text-h4);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-2);
  color: var(--text-on-light);
}

.card-feature__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.6;
}


/* --- CARDS — STAT (oversize number) --- */
.card-stat {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  /* No backdrop-filter — on solid bg, opacity alone sufficient */
}


/* --- CARDS — BENTO ITEM --- */
.bento-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--glass-shadow);
  transition: all 300ms var(--ease-default);
}

/* No backdrop-filter on .bento-card — sits on solid bg, opacity alone sufficient */

.bento-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.bento-card--gradient {
  background: linear-gradient(135deg, rgba(151, 151, 255, 0.08), rgba(237, 251, 140, 0.05));
  border-color: rgba(151, 151, 255, 0.12);
}

.bento-card__overline {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
  color: var(--text-on-light-muted);
}

.bento-card__title {
  font-size: var(--text-h4);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-on-light);
}

.bento-card__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.5;
}


/* --- TESTIMONIAL --- */
.testimonial-main {
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--glass-strong-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  /* No backdrop-filter — sits on solid light bg, opacity alone sufficient */
}

.testimonial-main__quote-mark {
  font-size: 4rem;
  font-weight: 300;
  color: var(--accent-coral);
  opacity: 0.5;
  line-height: 0.8;
  font-family: Georgia, 'Times New Roman', serif;
}

.testimonial-main__text {
  font-size: var(--text-body-lg);
  font-style: italic;
  line-height: 1.7;
  margin: var(--space-4) 0 var(--space-6);
  color: var(--text-on-light);
}

.testimonial-main__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-main__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-coral-15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--text-on-light);
  flex-shrink: 0;
}

.testimonial-main__name {
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--text-on-light);
}

.testimonial-main__role {
  font-size: var(--text-caption);
  color: var(--text-on-light-muted);
}

/* Small testimonial (sidebar) */
.testimonial-sm {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  /* No backdrop-filter — sits on solid light bg, opacity alone sufficient */
  transition: all var(--duration-normal) var(--ease-default);
}

.testimonial-sm:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.testimonial-sm__text {
  font-size: var(--text-body);
  font-style: italic;
  color: var(--text-on-light-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.testimonial-sm__author {
  font-size: var(--text-caption);
  color: var(--text-on-light-subtle);
}


/* --- FORMS (unified, elegant) --- */
.form-section {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .form-section {
    padding: var(--space-10) var(--space-12);
  }
}

.form-section__title {
  font-size: var(--text-h3);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text-on-light);
}

.form-section__subtitle {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  margin-bottom: var(--space-6);
}

.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-on-light);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 52px;
  padding: 14px 16px;
  font-size: var(--text-body);
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: var(--bg-light-alt);
  color: var(--text-on-light);
  transition: border-color var(--duration-fast),
              box-shadow var(--duration-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(151, 151, 255, 0.12);
  background: var(--bg-white);
}

/* Inline form input variant (StudentAI notify) */
.form-input--inline {
  flex: 1;
  min-width: 180px;
  height: 44px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-on-light-muted);
  opacity: 1;
}

.form-input--error,
.form-textarea--error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(217, 54, 54, 0.1) !important;
}

.form-textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.form-error {
  font-size: var(--text-small);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.form-checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent-purple);
}

.form-checkbox label {
  font-size: var(--text-small);
  line-height: 1.5;
}

.form-radio {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.form-radio input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--accent-purple);
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form-radio-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-radio-item input[type="radio"] {
  accent-color: var(--accent-purple);
}

.form-checkbox-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.form-checkbox-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent-purple);
}

.form-checkbox-item label {
  font-size: var(--text-small);
  line-height: 1.5;
}

/* Radio group as pills */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.radio-label:hover {
  border-color: var(--accent-purple);
}

.radio-label:has(input:checked) {
  background: var(--accent-purple-15);
  border-color: var(--accent-purple);
  color: var(--text-on-light);
}

.radio-label input[type="radio"] {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
}

/* Checkbox as pill */
.checkbox-label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-small);
  line-height: 1.5;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent-purple);
}

.form-message {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: var(--text-body);
}

.form-message--success {
  background: rgba(45, 143, 78, 0.08);
  border-left: 3px solid var(--color-success);
}

.form-message--error {
  background: rgba(217, 54, 54, 0.08);
  border-left: 3px solid var(--color-error);
  color: var(--color-error);
}


/* --- TRAINING TABS (navigation between courses) --- */
.training-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.training-tabs__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: var(--text-small);
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--text-on-light-muted);
  text-decoration: none;
  transition: all var(--duration-fast);
  border: 1px solid transparent;
}

.training-tabs__link:hover {
  color: var(--text-on-light);
  background: rgba(0, 0, 0, 0.03);
}

.training-tabs__link--active {
  color: var(--text-on-light);
  background: var(--bg-white);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.training-tabs__link--lime.training-tabs__link--active {
  border-color: var(--accent-lime);
  background: var(--accent-lime-10);
}

.training-tabs__link--purple.training-tabs__link--active {
  border-color: var(--accent-purple);
  background: var(--accent-purple-10);
}

.training-tabs__link--orange.training-tabs__link--active {
  border-color: var(--accent-orange);
  background: var(--accent-orange-10);
}

.training-tabs__link--pink.training-tabs__link--active {
  border-color: var(--accent-pink);
  background: var(--accent-pink-10);
}

.training-tabs__link--turquoise.training-tabs__link--active {
  border-color: var(--accent-turquoise);
  background: var(--accent-turquoise-10);
}

.training-tabs__link--blue.training-tabs__link--active {
  border-color: var(--accent-blue);
  background: var(--accent-blue-10);
}


/* --- FAQ ACCORDION --- */
.faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.faq-question,
.faq-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-size: var(--text-h4);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  gap: var(--space-4);
  transition: color var(--duration-fast);
}

.faq-question:hover,
.faq-item__title:hover { color: var(--text-on-light); text-decoration: underline; text-decoration-color: var(--accent-purple); text-underline-offset: 4px; }

.faq-icon,
.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
  font-size: 1.5rem;
  line-height: 1;
}

.faq-item[open] .faq-icon,
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }

.faq-answer,
.faq-item__content {
  padding: 0 0 20px;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}


/* --- STEPPER --- */
.stepper {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stepper__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all var(--duration-normal);
}

.stepper__step:hover {
  box-shadow: var(--shadow-sm);
}

.stepper__number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-purple-15);
  color: var(--text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-body);
  flex-shrink: 0;
}

.stepper__content {
  flex: 1;
}

.stepper__title {
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--text-on-light);
}

.stepper__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
}


/* --- CREDENTIALS & FUNDING (combined section) --- */
.credentials-funding {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .credentials-funding { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
}

/* Credential list inside glass card */
.credential-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.credential-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.credential-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-small);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}
.credential-item__badge--lime  { background: var(--accent-lime); color: #1a1a1a; }
.credential-item__badge--amber { background: var(--accent-amber); color: #1a1a1a; }
.credential-item__badge--coral { background: var(--accent-coral); color: #1a1a1a; }
.credential-item__body { flex: 1; }
.credential-item__title {
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.3;
  margin-bottom: 2px;
}
.credential-item__desc {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

/* Funding stats */
.funding-stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.funding-stat {
  flex: 1;
}
.funding-stat__number {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-2);
  display: inline-block;
  padding-bottom: 6px;
}
.funding-stat__number--lime  { border-bottom: 4px solid var(--accent-lime); }
.funding-stat__number--amber { border-bottom: 4px solid var(--accent-amber); }
.funding-stat__label {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  line-height: 1.5;
}
.funding-stat__label strong {
  color: var(--text-on-light);
}
.funding-note {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}
.cert-note {
  font-size: var(--text-small);
  color: var(--text-on-light-subtle);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--glass-border);
}


/* --- TEAM CARD --- */
.team-card {
  background: var(--bg-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-default);
}

.team-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.team-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-lime-15);
  color: var(--text-on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.team-card__avatar--lime      { background: var(--accent-lime-15); }
.team-card__avatar--amber     { background: var(--accent-amber-15); }
.team-card__avatar--coral     { background: var(--accent-coral-15); }

.team-card__name {
  font-size: var(--text-h4);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  margin-bottom: var(--space-3);
}

.team-card__contact {
  font-size: var(--text-small);
  line-height: 1.8;
}

.team-card__contact a {
  color: var(--text-on-light);
  text-decoration: underline;
  text-decoration-color: var(--accent-lime);
  text-underline-offset: 3px;
  transition: color var(--duration-fast);
}
.team-card--amber .team-card__contact a { text-decoration-color: var(--accent-amber); }
.team-card--coral .team-card__contact a { text-decoration-color: var(--accent-coral); }

.team-card__contact a:hover { text-decoration-color: var(--text-on-light); }


/* --- PARTNERS --- */
.partners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.partners__label {
  width: 100%;
  text-align: center;
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  color: var(--text-on-light-subtle);
}

.partners img {
  max-height: 50px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: all var(--duration-normal);
  object-fit: contain;
}
.partners img:hover { filter: grayscale(0); opacity: 1; }

/* Dark section variant — original logos as-is */
.partners--dark img {
  filter: none;
  opacity: 1;
  max-height: 50px;
  border-radius: var(--radius-sm);
}
.partners--dark img:hover {
  filter: none;
  opacity: 1;
}

.partners__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
}


/* --- COOKIE BANNER --- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--glass-strong-bg);
  backdrop-filter: blur(var(--glass-strong-blur));
  -webkit-backdrop-filter: blur(var(--glass-strong-blur));
  border-top: 1px solid var(--glass-border);
  padding: var(--space-4) 0;
  transform: translateY(100%);
  transition: transform 300ms var(--ease-out);
}

.cookie-banner--visible { transform: translateY(0); }

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 768px) {
  .cookie-banner__inner { flex-direction: row; justify-content: space-between; }
}

.cookie-banner__text {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}


/* --- BREADCRUMB --- */
.breadcrumb {
  padding: var(--space-3) 0;
  padding-top: calc(var(--navbar-height) + var(--space-3));
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
}

.breadcrumb__link {
  color: var(--text-on-light-subtle);
  text-decoration: none;
  transition: color 200ms;
}

.breadcrumb__link:hover {
  color: var(--accent-purple);
}

.breadcrumb__sep {
  margin: 0 var(--space-1);
  color: var(--text-on-light-subtle);
}

.breadcrumb__current {
  color: var(--text-on-light);
  font-weight: 500;
}

/* --- FOOTER (light) --- */
.footer {
  background: var(--bg-dark-elevated);
  color: var(--text-on-light-muted);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
}

.footer__brand { max-width: 280px; }

.footer__logo {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-4);
}

.footer__heading {
  font-size: var(--text-overline);
  font-weight: 600;
  color: var(--text-on-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-small);
  color: var(--text-on-light-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer__link:hover { color: var(--text-on-light); }

.footer__contact-item {
  font-size: var(--text-small);
  line-height: 1.8;
}

.footer__social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.footer__social a {
  color: var(--text-on-light-muted);
  transition: color var(--duration-fast);
  display: inline-flex !important; /* prevent JS from hiding social icons */
}

.footer__social a:hover { color: var(--text-on-light); }

.footer__bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: var(--space-6);
  font-size: var(--text-caption);
  text-align: center;
  color: var(--text-on-light-subtle);
}


/* --- NUMBER LIST --- */
.numbered-list {
  counter-reset: numbered;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .numbered-list--2col { grid-template-columns: repeat(2, 1fr); }
}

.numbered-list__item {
  display: flex;
  gap: var(--space-4);
  counter-increment: numbered;
}

.numbered-list__item::before {
  content: counter(numbered) ".";
  font-weight: 700;
  min-width: 28px;
  flex-shrink: 0;
  color: var(--text-on-light);
}


/* --- SKILL GRID — visual "what you'll learn" cards --- */
.skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .skill-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .skill-grid { grid-template-columns: repeat(3, 1fr); }
}

.skill-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  transition: all 200ms var(--ease-default);
  position: relative;
  overflow: hidden;
}

.skill-card:hover {
  background: var(--glass-strong-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.skill-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
  color: var(--text-on-light);
}

.skill-card__number--lime      { background: var(--accent-lime); }
.skill-card__number--orange    { background: var(--accent-orange); }
.skill-card__number--pink      { background: var(--accent-pink); }
.skill-card__number--turquoise { background: var(--accent-turquoise); }
.skill-card__number--purple    { background: var(--accent-purple); }
.skill-card__number--blue      { background: var(--accent-blue); }

.skill-card__text {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-on-light-muted);
}


/* --- CHALLENGE GRID — visual "what problems it solves" cards --- */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .challenge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .challenge-grid { grid-template-columns: repeat(3, 1fr); }
}

.challenge-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all 200ms var(--ease-default);
  position: relative;
}

.challenge-card:hover {
  background: var(--glass-strong-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.challenge-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.challenge-card__icon--lime      { background: var(--accent-lime-15); border: 2px solid var(--accent-lime); }
.challenge-card__icon--orange    { background: var(--accent-orange-15); border: 2px solid var(--accent-orange); }
.challenge-card__icon--pink      { background: var(--accent-pink-15); border: 2px solid var(--accent-pink); }
.challenge-card__icon--turquoise { background: var(--accent-turquoise-15); border: 2px solid var(--accent-turquoise); }
.challenge-card__icon--purple    { background: var(--accent-purple-15); border: 2px solid var(--accent-purple); }
.challenge-card__icon--blue      { background: var(--accent-blue-15); border: 2px solid var(--accent-blue); }

.challenge-card__content {
  flex: 1;
  min-width: 0;
}

.challenge-card__title {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-on-light);
  margin-bottom: 2px;
}

.challenge-card__desc {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-on-light-muted);
}


/* --- TAG GROUP --- */
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}


/* --- PROGRAM DAY --- */
.program-day {
  padding: var(--space-6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-xl);
  background: var(--bg-white);
}

.program-day__title {
  font-size: var(--text-h4);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--text-on-light);
  border-left: 3px solid var(--accent-purple);
  padding-left: var(--space-2);
}

.program-day__text {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}


/* --- HIGHLIGHT BOX --- */
.highlight-box {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
  background: var(--glass-subtle-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  /* No backdrop-filter — subtle element, doesn't need GPU cost */
}

.highlight-box__title {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text-on-light);
}

.highlight-box__text {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-on-light-muted);
}


/* --- @SUPPORTS FALLBACKS (no backdrop-filter) — opacity +8% from glass tier --- */
@supports not (backdrop-filter: blur(1px)) {
  .btn--secondary {
    background: rgba(255, 255, 255, 0.46);
  }
  .card-feature {
    background: rgba(255, 255, 255, 0.78);
  }
  .card-stat,
  .testimonial-sm,
  .bento-card {
    background: rgba(255, 255, 255, 0.63);
  }
  .testimonial-main,
  .cookie-banner {
    background: rgba(255, 255, 255, 0.78);
  }
  .highlight-box {
    background: rgba(255, 255, 255, 0.46);
  }
}


/* --- SKELETON LOADING --- */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* --- SILESIA EXAMPLE ANNOTATION --- */
.stat-annotation {
  display: block;
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--text-on-light-subtle);
  margin-top: var(--space-1);
  font-style: italic;
}

/* ========== SIGNUP FORM (sekcja signup_form) ========== */
.section--signup { background: var(--bg-soft, #f9fafb); padding: var(--space-12) 0; }
.signup-form-wrapper {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.signup-form__header { text-align: center; margin-bottom: var(--space-6); }
.signup-form__title { margin: 0 0 var(--space-2) 0; font-size: 1.75rem; }
.signup-form__subtitle { color: var(--text-on-light-muted); margin: 0; }

.signup-form__legend {
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: 0.95rem;
}
.signup-form__sessions { border: 0; padding: 0; margin: 0 0 var(--space-5) 0; }
.signup-form__no-sessions {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 6px;
    color: #78350f;
    font-size: 0.9rem;
}

.signup-sessions { display: flex; flex-direction: column; gap: var(--space-2); }
.signup-session {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.signup-session:hover { border-color: #d1d5db; background: #fafafa; }
.signup-session input[type="radio"] { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.signup-session:has(input:checked) { border-color: var(--accent-lime, #c1ff5a); background: #f7ffe6; }
.signup-session--full { opacity: 0.5; cursor: not-allowed; }
.signup-session--full:hover { border-color: #e5e7eb; background: transparent; }

.signup-session__body { flex: 1; min-width: 0; }
.signup-session__date { font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
.signup-session__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    font-size: 0.85rem; color: var(--text-on-light-muted);
}
.signup-session__format {
    background: #eef2ff; color: #3730a3;
    padding: 2px 8px; border-radius: 4px; font-weight: 500;
}
.signup-session__seats--low { color: #b45309; font-weight: 600; }

.signup-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.signup-form__field--full { grid-column: 1 / -1; }
.signup-form__field { display: flex; flex-direction: column; gap: 4px; }
.signup-form__label { font-size: 0.85rem; font-weight: 500; color: var(--text-on-light-muted); }
.signup-form__field input,
.signup-form__field textarea {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.signup-form__field input:focus,
.signup-form__field textarea:focus {
    outline: none;
    border-color: var(--accent-lime, #c1ff5a);
    box-shadow: 0 0 0 3px rgba(193,255,90,0.2);
}
.signup-form__field textarea { resize: vertical; min-height: 80px; }

.signup-form__consents {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: #fafafa;
    border-radius: var(--radius-md);
}
.signup-consent {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.85rem; line-height: 1.5;
    cursor: pointer;
}
.signup-consent input { margin-top: 2px; flex-shrink: 0; }
.signup-consent a { color: var(--text-on-light); text-decoration: underline; }

.signup-form__error {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}
.signup-form__actions { text-align: center; }
.signup-form__submit { padding: 12px 32px; min-width: 200px; }

@media (max-width: 640px) {
    .signup-form-wrapper { padding: var(--space-5); }
    .signup-form__grid { grid-template-columns: 1fr; }
}

/* ========== SIGNUP MODAL (sukces) ========== */
.signup-modal[hidden] { display: none !important; }
.signup-modal {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
}
.signup-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}
.signup-modal__panel {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: signup-modal-in 0.25s ease-out;
}
@keyframes signup-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.signup-modal__icon {
    width: 64px; height: 64px;
    margin: 0 auto var(--space-4);
    background: var(--accent-lime, #c1ff5a);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; font-weight: bold; color: #1a1a1a;
}
.signup-modal__title { margin: 0 0 var(--space-3) 0; font-size: 1.5rem; }
.signup-modal__message { color: var(--text-on-light-muted); margin: 0 0 var(--space-5) 0; }
.signup-modal__close { min-width: 140px; }

/* Disclaimery pod listą terminów */
.signup-disclaimers { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.signup-disclaimer {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 0.82rem; line-height: 1.4;
    color: var(--text-on-light-muted);
    background: #f9fafb;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
}
.signup-disclaimer--funding {
    background: #fffbeb;
    color: #78350f;
}
.signup-disclaimer__icon { flex-shrink: 0; font-size: 1rem; line-height: 1.2; }

/* ========== STRONA /szkolenia (katalog 2-kolumnowy) ========== */
.body--trainings-index main { padding-top: var(--navbar-height); }
.trainings-index__hero { padding: var(--space-12) 0 var(--space-6); }
.trainings-index__breadcrumb {
    font-size: 0.85rem; color: var(--text-on-light-muted);
    display: flex; gap: 6px; align-items: center;
    margin-bottom: var(--space-3);
}
.trainings-index__breadcrumb a { color: inherit; text-decoration: none; }
.trainings-index__breadcrumb a:hover { text-decoration: underline; }
.trainings-index__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--space-3); }
.trainings-index__lead {
    max-width: 780px; color: var(--text-on-light-muted);
    font-size: 1.05rem; line-height: 1.6;
}
.trainings-index__lead strong { color: var(--text-on-light); }

.trainings-index__catalog { padding: var(--space-6) 0 var(--space-12); }
.trainings-catalog { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 960px) { .trainings-catalog { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.trainings-catalog__col-header { margin-bottom: var(--space-4); }
.trainings-catalog__col-overline {
    display: inline-block;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700;
    border-left: 3px solid currentColor;
    padding-left: 8px;
    margin-bottom: 8px;
}
.trainings-catalog__col-title { margin: 0 0 8px; font-size: 1.5rem; }
.trainings-catalog__col-sub { margin: 0 0 var(--space-2); color: var(--text-on-light-muted); font-size: 0.95rem; }
.trainings-catalog__count { font-size: 0.82rem; color: var(--text-on-light-subtle); font-weight: 500; }
.trainings-catalog__list { display: flex; flex-direction: column; gap: var(--space-3); }
.trainings-catalog__empty {
    padding: var(--space-6); text-align: center; color: var(--text-on-light-muted);
    background: #fafafa; border-radius: var(--radius-md);
}

/* Karty szkoleń w katalogu */
.training-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    position: relative;
}
.training-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: #d1d5db;
}
.training-card__badge { margin-bottom: var(--space-2); }
.training-card__title { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.2; }
.training-card__subtitle {
    margin: 0 0 var(--space-3); color: var(--text-on-light-muted);
    font-size: 0.92rem; line-height: 1.5;
}
.training-card__meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: var(--space-3);
    font-size: 0.82rem; color: var(--text-on-light-muted);
}
.training-card__meta-item--price {
    color: var(--text-on-light); font-weight: 600;
}
.training-card__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.88rem; font-weight: 600;
    color: var(--text-on-light);
    text-decoration: underline;
    text-decoration-color: var(--accent-purple);
    text-underline-offset: 3px;
}
.training-card:hover .btn__arrow { transform: translateX(3px); transition: transform 0.15s; }

/* ========== NAVBAR MEGA-MENU (Szkolenia AI dropdown) ========== */
.navbar__item--has-mega { position: relative; }
.navbar__link--has-mega {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
}
.navbar__mega-chevron {
    font-size: 0.75em; opacity: 0.6;
    transition: transform 0.15s ease;
}
.navbar__item--has-mega:hover .navbar__mega-chevron,
.navbar__item--has-mega:focus-within .navbar__mega-chevron {
    transform: rotate(180deg);
}

.navbar__mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 560px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    padding: var(--space-5);
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    z-index: 1000;
}
/* Bridge element — niewidzialny obszar między przyciskiem a menu, żeby hover się nie łamał */
.navbar__item--has-mega::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 20px;
    z-index: 999;
}
@media (min-width: 1024px) {
    .navbar__item--has-mega:hover .navbar__mega,
    .navbar__item--has-mega:focus-within .navbar__mega {
        display: grid;
    }
}

.navbar__mega-col {
    display: flex; flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.navbar__mega-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700;
    border-left: 3px solid currentColor;
    padding-left: 8px;
    margin-bottom: 8px;
    line-height: 1.2;
}
.navbar__mega-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-on-light);
    transition: background 0.12s;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
}
.navbar__mega-item:hover { background: #f3f4f6; }
.navbar__mega-item-title { font-weight: 600; color: var(--text-on-light); }
.navbar__mega-item-badge {
    font-size: 11px; color: var(--text-on-light-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 500;
    max-width: 55%;
    text-align: right;
}
.navbar__mega-empty {
    font-size: 13px; color: var(--text-on-light-muted);
    padding: 8px 10px; font-style: italic;
}
.navbar__mega-view-all {
    margin-top: var(--space-2);
    padding: 8px 10px;
    font-size: 13px; font-weight: 600;
    color: var(--text-on-light);
    text-decoration: underline;
    text-decoration-color: var(--accent-purple);
    text-underline-offset: 3px;
    border-top: 1px solid #f0f0f0;
    padding-top: var(--space-2);
    text-transform: none;
    letter-spacing: normal;
}
.navbar__mega-view-all:hover { background: #f9fafb; border-radius: 4px; }

/* Mobile: mega-menu = po prostu link (żadnego dropdowna na < 1024) */
@media (max-width: 1023px) {
    .navbar__mega { display: none; }
    .navbar__mega-chevron { display: none; }
}

/* ========== HERO VARIANT SWAP (funded ↔ commercial) ========== */
/* Podkreślenie wybranej kolumny w split: overline + karty, a druga przytłumiona */
.hero__visual--highlight-funded .hero__visual-col[data-col="commercial"],
.hero__visual--highlight-commercial .hero__visual-col[data-col="funded"] {
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.hero__visual--highlight-funded .hero__visual-col[data-col="funded"],
.hero__visual--highlight-commercial .hero__visual-col[data-col="commercial"] {
    opacity: 1;
    transition: opacity 0.3s ease;
}
/* Podświetlenie labela aktywnej kolumny (większa czcionka + mocniejszy border) */
.hero__visual--highlight-funded .hero__visual-col[data-col="funded"] .hero__visual-col__label,
.hero__visual--highlight-commercial .hero__visual-col[data-col="commercial"] .hero__visual-col__label {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.hero__visual-col__label { transition: transform 0.3s ease, opacity 0.3s ease; }

/* Akcenty w hero title zmieniają kolor w zależności od wariantu */
.hero--variant-funded .hero__title .accent,
.hero--variant-funded .hero__title em {
    text-decoration: underline;
    text-decoration-color: var(--accent-lime);
    text-underline-offset: 6px;
    font-style: normal;
}
.hero--variant-commercial .hero__title .accent,
.hero--variant-commercial .hero__title em {
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 6px;
    font-style: normal;
}
.hero__title em { font-style: normal; }

/* Szablon <template> nie wyświetla się nigdzie — dla pewności */
template[data-hero-swap-markup] { display: none; }

/* Sub-label pod nagłówkiem kolumny w split hero */
.hero__visual-col__sublabel {
    font-size: 12px;
    color: var(--text-on-light-muted);
    margin-top: -2px;
    margin-bottom: var(--space-2);
    padding-left: 11px;
    letter-spacing: 0.01em;
    font-weight: 500;
}

/* Filtrowanie katalogu /szkolenia przez ?typ=... */
.trainings-catalog--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
.trainings-catalog__col-link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 8px;
    padding: 4px 0;
    transition: opacity 0.15s;
}
.trainings-catalog__col-link:hover { opacity: 0.75; }
.trainings-catalog__col-link-hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    color: var(--text-on-light-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 4px;
}
.trainings-catalog__col-link:hover .btn__arrow { transform: translateX(3px); transition: transform 0.15s; }

.trainings-index__filter-clear {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.88rem;
    color: var(--text-on-light);
    text-decoration: underline;
    text-decoration-color: var(--accent-purple);
    text-underline-offset: 3px;
}

/* Sub-nagłówek w kolumnie stopki (dla grup „Z dofinansowaniem / Komercyjne") */
.footer__subheading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-on-light-muted);
    margin: var(--space-3) 0 6px;
    padding-left: 8px;
    border-left: 2px solid currentColor;
    line-height: 1.2;
}
.footer__subheading:first-child,
.footer__heading + .footer__subheading { margin-top: 0; }
.footer__subheading--funded { color: var(--accent-lime); }
.footer__subheading--commercial { color: var(--accent-orange); }

/* Link „Zobacz wszystkie N →" w stopce — wyróżniony */
.footer__link--more {
    margin-top: 4px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-on-light) !important;
    text-decoration: underline;
    text-decoration-color: var(--accent-purple);
    text-underline-offset: 3px;
    opacity: 0.85;
}
.footer__link--more:hover { opacity: 1; }

.signup-session__duration {
    background: #ecfdf5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.85rem;
}

.signup-session__time-detail {
    font-size: 0.82rem;
    color: var(--text-on-light-muted);
    margin-top: 2px;
    margin-bottom: 4px;
}

/* Harmonogram spotkań wewnątrz karty terminu */
.signup-session__schedule {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}
.signup-session__schedule-summary {
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-on-light);
    font-weight: 600;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.signup-session__schedule-summary::before {
    content: '▸';
    transition: transform 0.15s;
    font-size: 0.75em;
    color: var(--text-on-light-muted);
}
.signup-session__schedule[open] .signup-session__schedule-summary::before {
    transform: rotate(90deg);
}
.signup-session__schedule-summary::-webkit-details-marker { display: none; }

.signup-session__meetings {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-on-light);
    counter-reset: meeting;
    list-style: none;
}
.signup-session__meeting {
    position: relative;
    padding: 3px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}
.signup-session__meeting::before {
    counter-increment: meeting;
    content: counter(meeting);
    position: absolute;
    left: -22px;
    top: 4px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--accent-lime, #c1ff5a);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
}
.signup-session__meeting-date { font-weight: 600; }
.signup-session__meeting-time {
    color: var(--text-on-light-muted);
    font-variant-numeric: tabular-nums;
}
.signup-session__meeting-note { color: var(--text-on-light-muted); font-style: italic; }

/* Box ceny w sekcji signup_form */
.signup-form__price {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    text-align: center;
}
.signup-form__price-main {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin-bottom: 6px;
}
.signup-form__price-label {
    font-size: 0.82rem;
    color: var(--text-on-light-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.signup-form__price-value {
    font-size: 2rem;
    font-weight: 700;
    color: #065f46;
    line-height: 1;
}
.signup-form__price-regular {
    font-size: 0.88rem;
    color: var(--text-on-light-muted);
    margin-bottom: 4px;
}
.signup-form__price-strike {
    text-decoration: line-through;
    color: #9ca3af;
}
.signup-form__price-note {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-on-light-muted);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* External CTA (dofinansowane bez terminów → Monday form) */
.signup-form__external-cta {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.signup-form__external-lead {
    font-size: 1.1rem;
    margin: 0 0 var(--space-4);
    color: var(--text-on-light);
}
.signup-form__external-btn {
    padding: 14px 32px;
    min-width: 260px;
}
.signup-form__external-contact {
    margin-top: var(--space-5);
    color: var(--text-on-light-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
.signup-form__external-contact a {
    color: var(--text-on-light);
    text-decoration: underline;
    text-decoration-color: var(--accent-purple);
    text-underline-offset: 3px;
}
/* ========================================
   PIK_AI — Animations & Scroll Effects
   v3.0 — Light Theme Redesign
   ======================================== */

/* === SCROLL-TRIGGERED REVEALS ===
   Initial opacity:0 only when JS has confirmed it is ready (via .js-reveal-ready on <html>).
   Without JS, or on JS error, elements are fully visible by default (H1 robustness — Fix 6, Task 5). */

html.js-reveal-ready .reveal-up {
  opacity: 0;
  transform: translateY(28px);
}

html.js-reveal-ready .reveal-down {
  opacity: 0;
  transform: translateY(-28px);
}

html.js-reveal-ready .reveal-left {
  opacity: 0;
  transform: translateX(-32px);
}

html.js-reveal-ready .reveal-right {
  opacity: 0;
  transform: translateX(32px);
}

html.js-reveal-ready .reveal-scale {
  opacity: 0;
  transform: scale(0.92);
}

html.js-reveal-ready .reveal-fade {
  opacity: 0;
}

/* Revealed state (added by JS) */
.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  transition:
    opacity var(--duration-reveal) var(--ease-spring),
    transform var(--duration-reveal) var(--ease-spring);
}

/* === STAGGER DELAYS === */
.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 100ms; }
.stagger > *:nth-child(3)  { transition-delay: 220ms; }
.stagger > *:nth-child(4)  { transition-delay: 360ms; }
.stagger > *:nth-child(5)  { transition-delay: 500ms; }
.stagger > *:nth-child(6)  { transition-delay: 640ms; }

.stagger-wide > *:nth-child(1) { transition-delay: 0ms; }
.stagger-wide > *:nth-child(2) { transition-delay: 150ms; }
.stagger-wide > *:nth-child(3) { transition-delay: 350ms; }
.stagger-wide > *:nth-child(4) { transition-delay: 550ms; }
.stagger-wide > *:nth-child(5) { transition-delay: 750ms; }
.stagger-wide > *:nth-child(6) { transition-delay: 950ms; }

/* === CTA BUTTON GLOW PULSE === */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(180, 190, 60, 0.2), 0 1px 3px rgba(0,0,0,0.08); }
  50%      { box-shadow: 0 4px 32px rgba(180, 190, 60, 0.35), 0 1px 3px rgba(0,0,0,0.08); }
}

.btn--primary:hover {
  animation: cta-glow 2.5s ease-in-out infinite;
}

/* === GLASS CARD SHIMMER === */
@keyframes glass-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.card-glass:hover::after {
  animation: glass-shimmer 1.2s ease-out;
}

/* === COUNT-UP ANIMATION HELPER === */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* === HERO FLOAT CARDS — subtle breathing === */
/* Float animations only activate after reveal transition completes (.float-active) */
@keyframes float-breathe-1 {
  0%, 100% { transform: translateX(20px) translateY(0); }
  50%      { transform: translateX(20px) translateY(-6px); }
}

@keyframes float-breathe-2 {
  0%, 100% { transform: translateX(-10px) translateY(0); }
  50%      { transform: translateX(-10px) translateY(-8px); }
}

@keyframes float-breathe-3 {
  0%, 100% { transform: translateX(30px) translateY(0); }
  50%      { transform: translateX(30px) translateY(-5px); }
}

@keyframes float-breathe-4 {
  0%, 100% { transform: translateX(5px) translateY(0); }
  50%      { transform: translateX(5px) translateY(-7px); }
}

@keyframes float-breathe-5 {
  0%, 100% { transform: translateX(-15px) translateY(0); }
  50%      { transform: translateX(-15px) translateY(-6px); }
}

@keyframes float-breathe-6 {
  0%, 100% { transform: translateX(25px) translateY(0); }
  50%      { transform: translateX(25px) translateY(-8px); }
}

/* Float animations activate only when .float-active is added (after reveal completes) */
.hero__float-card.float-active:nth-child(1) { animation: float-breathe-1 5s ease-in-out infinite !important; transform: none !important; }
.hero__float-card.float-active:nth-child(2) { animation: float-breathe-2 6s ease-in-out infinite 0.5s !important; transform: none !important; }
.hero__float-card.float-active:nth-child(3) { animation: float-breathe-3 5.5s ease-in-out infinite 1s !important; transform: none !important; }
.hero__float-card.float-active:nth-child(4) { animation: float-breathe-4 6.5s ease-in-out infinite 1.5s !important; transform: none !important; }
.hero__float-card.float-active:nth-child(5) { animation: float-breathe-5 5.8s ease-in-out infinite 2s !important; transform: none !important; }
.hero__float-card.float-active:nth-child(6) { animation: float-breathe-6 6.2s ease-in-out infinite 2.5s !important; transform: none !important; }

/* === TIMELINE DOTS PULSE === */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151, 151, 255, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(151, 151, 255, 0); }
}

.timeline__dot.revealed {
  animation: dot-pulse 2s ease-in-out 1;
}

/* === SPINNER === */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === BACK TO TOP === */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-white);
  color: var(--text-on-light);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-purple);
  color: #1a1a1a;
  border-color: var(--accent-purple);
  box-shadow: var(--shadow-glow-purple);
}

/* === DECO-CIRCLES — static, no animation (W5: reduced visual noise) === */
.deco-circle {
  /* Removed floatCircle animation — static decorative elements only */
}

/* === TRAINING CARDS — hover lift only, no float animation (W4: reduces visual noise) === */
.section--dark .card-glass:hover {
  transform: translateY(-4px);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .hero__float-card { animation: none !important; }
  .deco-circle { animation: none !important; }
  /* .section--dark .card-glass — float animation removed, no override needed */
  .timeline__dot { animation: none !important; }
  .btn--primary:hover { animation: none !important; }
  .card-glass:hover::after { animation: none !important; }

  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Glassmorphism a11y guardrails (WCAG 2.2 AA) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-glass, .card-glass--strong, .glass, .site-header { background: var(--bg-white) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .card-glass, .card-glass--strong, .glass { background: var(--bg-white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* === TASK 6: Accessible global header — sticky glass, AA CTA, focus-safe === */
/* Sticky is on the template-part wrapper (.wp-site-blocks > header); its parent
   .wp-site-blocks is document-tall, so it has the scroll range to actually stick. */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 100; }
.site-header{background:var(--glass-strong-bg);backdrop-filter:blur(var(--glass-strong-blur));-webkit-backdrop-filter:blur(var(--glass-strong-blur));border-bottom:1px solid var(--glass-border);}
.site-header__inner{min-height:var(--navbar-height);padding-inline:var(--gutter);gap:var(--space-6);}
.site-header .wp-block-navigation a{color:var(--text-on-light);font-weight:500;}
.site-header .wp-block-navigation a:hover{color:#000;}
.site-cta .wp-block-button__link{background:var(--accent-lime);color:#1a1a1a;border-radius:var(--radius-full);font-weight:600;padding:.6em 1.4em;}
.site-cta .wp-block-button__link:hover{background:#e2f56a;}
/* 2.4.11: keep focused element clear of the sticky header */
:root{scroll-padding-top:calc(var(--navbar-height) + 8px);}
@media (prefers-reduced-transparency: reduce){ .site-header{background:var(--bg-white);} }

/* === TASK 7: Global footer — columns + company data === */
.site-footer{background:var(--bg-dark);color:var(--text-on-dark);padding:var(--space-20) var(--gutter) var(--space-10);}
.site-footer a{color:var(--text-on-dark);} .site-footer a:hover{color:#000;}
.site-footer__legal{margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(0,0,0,.08);font-size:var(--text-small);color:var(--text-on-dark-muted);}