/* =========================================================
   layout/hero.css
   ---------------------------------------------------------
   Sekcja hero (główny baner na stronie głównej):
   - .hero-section     — padding sekcji
   - .hero-grid        — siatka tekst + grafika
   - .hero-copy        — lewa kolumna z tekstem
   - .hero-content     — nagłówek i opis
   - .hero-actions     — przyciski CTA
   - .hero-visual      — prawa kolumna z grafiką
   - .visual-window    — makieta okna przeglądarki
   - .visual-sidebar   — ciemny sidebar w makiecie
   - .visual-content   — jasna treść w makiecie
   - .visual-top       — belka na górze makiety
   - .visual-cards     — karty w makiecie
   - .visual-chart     — wykres w makiecie
   ========================================================= */

.hero-section {
  padding: 58px 0 46px;
}

.hero-grid {
  display: grid;
  gap: 34px;
}

.hero-copy {
  display: grid;
  align-content: center;
}

.hero-content h1,
.hero-content h2 {
  max-width: 720px;
  font-size: clamp(46px, 13vw, 88px);
}

.hero-content p {
  max-width: 690px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 30px;
}

/* -------------------------
   Grafika hero — makieta okna
   ------------------------- */

.hero-visual {
  min-height: 320px;

  display: grid;
  place-items: center;
}

.visual-window {
  width: min(100%, 600px);
  aspect-ratio: 1.35;

  display: grid;
  grid-template-columns: 0.25fr 0.75fr;

  overflow: hidden;

  border: 10px solid #111111;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(7, 18, 37, 0.2);

  transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
}

.visual-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;

  padding: 26px 18px;
  background: #081427;
}

.visual-sidebar span {
  height: 12px;

  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
}

.visual-content {
  padding: 28px;
  background: linear-gradient(135deg, #ffffff, #f4f0eb);
}

.visual-top {
  width: 56%;
  height: 24px;

  border-radius: 99px;
  background: #0c1526;
  opacity: 0.9;
}

.visual-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  margin-top: 26px;
}

.visual-cards i {
  height: 70px;

  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(7, 18, 37, 0.08);
}

.visual-chart {
  height: 128px;
  margin-top: 18px;

  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 70%, rgba(167, 139, 120, 0.35), transparent 28%),
    radial-gradient(circle at 72% 42%, rgba(7, 18, 37, 0.16), transparent 30%),
    #ffffff;

  box-shadow: 0 8px 30px rgba(7, 18, 37, 0.08);
}