/* ============================================================
   HOME — strona główna docenki.pl / gratsly.com
   ============================================================ */

/* Reset text-decoration dla linków stylowanych jako przyciski */
a.btn { text-decoration: none; }

/* ── HERO ──────────────────────────────────────────────────── */

.home-hero {
  padding: var(--space-48) 0 var(--space-32);
  text-align: center;
}

.home-hero-symbol {
  width: 112px;
  height: 112px;
  margin: 0 auto var(--space-24);
  background: url(../resources/symbol_light_transparent.png) center/contain no-repeat;
}

[data-theme="dark"] .home-hero-symbol {
  filter:
    drop-shadow(0 0 16px rgba(248, 193, 80, 0.80))
    drop-shadow(0 0 48px rgba(248, 160, 20, 0.45));
}

.home-hero-heading {
  font-family:    var(--font-heading);
  font-weight:    var(--font-weight-heading);
  font-size:      clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: var(--letter-spacing-heading);
  line-height:    var(--line-height-heading);
  color:          var(--color-text-primary);
  margin-bottom:  var(--space-12);
}

.home-hero-sub {
  font-size:     var(--font-size-body);
  color:         var(--color-text-secondary);
  line-height:   var(--line-height-body);
  margin:        0 auto var(--space-32);
  overflow-wrap: break-word;
}

.home-hero-actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-12);
  margin-top:     var(--space-4);
}

/* ── SECTIONS ──────────────────────────────────────────────── */

.home-section {
  margin-top: var(--space-48);
  contain:    layout style;
}

.home-section-title {
  font-family:    var(--font-heading);
  font-weight:    var(--font-weight-heading);
  font-size:      var(--font-size-h2);
  letter-spacing: var(--letter-spacing-heading);
  color:          var(--color-text-primary);
  margin-bottom:  var(--space-16);
  text-align:     center;
}

/* ── STEPS ─────────────────────────────────────────────────── */

.home-steps-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-12);
}

.home-step {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-16);
  padding:     var(--space-16);
}

.home-step-icon {
  width:            40px;
  height:           40px;
  flex-shrink:      0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--radius-circle);
  background:       linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color:            #fff;
  font-family:      var(--font-body);
  font-weight:      700;
  font-size:        var(--font-size-body);
  line-height:      1;
  user-select:      none;
}

/* min-width: 0 — fix flex child nie może się skurczyć bez tego */
.home-step > div:last-child {
  min-width: 0;
}

.home-step-title {
  font-weight:   700;
  font-size:     var(--font-size-body);
  color:         var(--color-text-primary);
  margin-bottom: var(--space-4);
  overflow-wrap: break-word;
}

.home-step-desc {
  font-size:     var(--font-size-small);
  color:         var(--color-text-secondary);
  line-height:   var(--line-height-body);
  overflow-wrap: break-word;
}

/* ── FAQ ───────────────────────────────────────────────────── */

.home-faq-card {
  padding: 0 var(--space-16);
}

.home-faq-card .accordion-item:last-child {
  border-bottom: none;
}

/* ── FOOTER ────────────────────────────────────────────────── */

.home-footer {
  margin-top:      var(--space-48);
  padding-bottom:  var(--space-48);
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             var(--space-16);
  flex-wrap:       wrap;
}

.home-footer-link {
  font-size:                   var(--font-size-small);
  color:                       var(--color-text-secondary);
  text-decoration:             none;
  touch-action:                manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:                  color var(--anim-duration-fast);
  min-height:                  44px;
  display:                     flex;
  align-items:                 center;
}

.home-footer-link:hover { color: var(--color-primary); }

.home-footer-sep {
  color:       var(--color-text-secondary);
  opacity:     0.4;
  font-size:   var(--font-size-small);
  user-select: none;
}