/* Wyciąg z us2.css na potrzeby strony głównej (homepage.md).
   Używane klasy: .us2, .us2-hero, .us2-split, .us2-metrics, .us2-metric */

:root {
  --pa-yellow: #FADB04;
  --pa-yellow-2: #FBDD07;
  --pa-gold: #C99700;
  --pa-gold-text: #876600;
  --pa-black: #181818;
  --pa-graphite: #1a1a1a;
  --pa-ink: #1a1a1a;
  --pa-slate: #4c4a42;
  --pa-mist: #8a857a;
  --pa-line: #e7e4da;
  --pa-paper: #ffffff;
  --pa-cloud: #f7f5ee;
  --pa-radius: 14px;
  --pa-shadow: 0 12px 34px rgba(24, 24, 24, 0.14);
  --pa-shadow-sm: 0 6px 16px rgba(24, 24, 24, 0.10);
  --pa-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Wspólna powłoka */
.us2 {
  font-family: var(--pa-sans);
  color: var(--pa-ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.us2 * { box-sizing: border-box; }
.us2 p { margin: 0 0 1em; }
.us2 a { color: var(--pa-gold-text); }
.us2 a:hover { color: var(--pa-black); }
.us2 img { max-width: 100%; height: auto; display: block; }

/* HERO */
.us2-hero {
  position: relative; overflow: hidden;
  border-radius: 20px; color: #fff;
  padding: 56px 44px;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(250, 219, 4, .42), transparent 60%),
    linear-gradient(135deg, #161616 0%, #1a1a1a 55%, #232323 100%);
  box-shadow: var(--pa-shadow);
  border: 1px solid #000;
}
.us2-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; margin: 0 0 .35em; letter-spacing: -0.025em; }
.us2-hero p { font-size: clamp(1.02rem, 1.6vw, 1.25rem); max-width: 60ch; color: #ded9c8; }
.us2-hero a { color: var(--pa-yellow); }

/* Layout dwukolumnowy */
.us2-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; margin: 28px 0; }
.us2-split figure { margin: 0; }
.us2-split figure img { border-radius: var(--pa-radius); box-shadow: var(--pa-shadow-sm); }

/* Metryki / liczby */
.us2-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; margin: 20px 0; }
.us2-metric { padding: 18px; border-radius: var(--pa-radius); background: rgba(250, 219, 4, .10); border: 1px solid rgba(250, 219, 4, .35); }
.us2-metric strong { display: block; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--pa-yellow); }
.us2-metric span { font-size: .82rem; opacity: .9; }

/* Responsywność */
@media (max-width: 760px) {
  .us2-split { grid-template-columns: 1fr; }
  .us2-hero { padding: 38px 24px; }
}