/* UTILS — shared layout, reveal, buttons, glow-line */
section { padding: 8rem 2rem; position: relative; }
.container { max-width: 1200px; margin: 0 auto; }

.s-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem;
  color: var(--c); letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 1rem;
}
.s-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800;
  line-height: 1.15; margin-bottom: 1rem;
}
.s-title span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.s-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.8; max-width: 560px; }

.reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-50px); transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(50px); transition: opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal-r.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; } .d5 { transition-delay: 0.5s; } .d6 { transition-delay: 0.6s; }

.glow-line { height: 1px; background: linear-gradient(90deg, transparent, var(--c) 30%, var(--p) 70%, transparent); opacity: 0.5; box-shadow: 0 0 12px rgba(0,245,255,0.3); }

.btn-glow {
  padding: 0.9rem 2.5rem; border-radius: 10px;
  font-size: 0.95rem; font-weight: 700; cursor: none;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--grad); color: #fff; border: none; position: relative; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-glow::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 20px 60px rgba(176,96,255,0.65), 0 0 40px rgba(0,245,255,0.25); }
.btn-glow:hover::before { opacity: 1; }

.btn-ghost {
  padding: 0.9rem 2.5rem; border-radius: 10px;
  font-size: 0.95rem; font-weight: 600; cursor: none;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.btn-ghost:hover { border-color: var(--p); color: var(--p); transform: translateY(-3px); box-shadow: 0 15px 45px rgba(176,96,255,0.35), 0 0 0 1px rgba(176,96,255,0.2); }