/* =============================================
   Screenly — hero.css
   Hero, how-it-works, guides sections
   ============================================= */

/* ── Hero ── */
.hero {
  padding-top: 128px; padding-bottom: 16px;
  text-align: center;
  background: var(--bg); position: relative;
}

.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    transparent, transparent 31px, var(--border) 31px, var(--border) 32px
  );
  opacity: 0.18; pointer-events: none;
}

.hero-bg-grid { display: none; }

.hero-content {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
  padding: 0 var(--page-pad);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--border-dark);
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted); font-family: var(--font-mono);
  margin-bottom: 28px;
  background: var(--bg-card);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: pulse-dot 2.2s infinite;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -2px; color: var(--text);
  margin-bottom: 24px;
}

.title-accent { color: var(--accent); font-style: italic; }

.hero-sub {
  font-size: 1.2rem; font-weight: 400;
  color: var(--text-muted);
  max-width: 640px; margin: 0 auto; line-height: 1.7;
}

/* ── How it works ── */
.how-section {
  padding: 80px var(--page-pad);
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

.how-container { max-width: var(--page-max); margin: 0 auto; }

.section-heading {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 900;
  letter-spacing: -0.5px; text-align: center;
  margin-bottom: 52px; color: var(--text);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 22px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.step-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }

.step-num {
  font-family: var(--font-display); font-size: 2.5rem;
  font-weight: 900; color: var(--accent); opacity: 0.25;
  margin-bottom: 10px; line-height: 1;
}

.step-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 900; margin-bottom: 8px; color: var(--text); }
.step-card p  { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; }

/* ── Guides ── */
.guides-section { padding: 64px var(--page-pad); border-top: 1px solid var(--border); }
.guides-container { max-width: var(--page-max); margin: 0 auto; }

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

.guide-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; justify-content: space-between; align-items: center;
  transition: all var(--transition); color: var(--text);
}

.guide-card:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); color: var(--text); opacity: 1; }

.guide-role { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; }

.guide-arrow { color: var(--text-dim); font-size: 1.1rem; transition: color var(--transition), transform var(--transition); }
.guide-card:hover .guide-arrow { color: var(--accent); transform: translateX(4px); }