/* HourHub landing — home-specific styles */

/* ── Hero ── */
.hero{padding:80px 0 60px;overflow:hidden;position:relative;text-align:center}
.hero-glow{
  position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:760px;height:560px;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow),transparent 70%);
}
.hero-logo{
  width:130px;height:130px;margin:0 auto 30px;border-radius:32px;
  box-shadow:var(--shadow);position:relative;
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero h1{font-size:clamp(40px,7vw,68px);position:relative}
.hero-lede{
  color:var(--text-2);font-size:clamp(17px,2.4vw,21px);
  max-width:44ch;margin:22px auto 0;line-height:1.55;position:relative;
}
.hero .store-row{justify-content:center;margin-top:38px;position:relative}
.hero-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:22px;position:relative}

/* ── Features ── */
.features{background:var(--surface-2)}
.feat-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:560px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.feat-grid{grid-template-columns:repeat(3,1fr)}}

/* ── How it works ── */
.steps{list-style:none;display:grid;gap:20px;counter-reset:st;max-width:820px;margin:0 auto}
@media(min-width:680px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;
}
.step-n{
  font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--gold);border:1px solid var(--gold-deep);border-radius:11px;
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  background:var(--glow);
}
.step h3{font-size:17px;font-weight:700}
.step p{color:var(--text-2);font-size:15px;margin-top:6px;line-height:1.55}

/* ── FAQ ── */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq-q{
  width:100%;background:none;border:0;cursor:pointer;color:var(--text);
  font-family:var(--display);font-size:16px;font-weight:600;text-align:left;
  padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-x{position:relative;width:16px;height:16px;flex:none}
.faq-x::before,.faq-x::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--gold);transition:transform .25s var(--ease),opacity .25s;
}
.faq-x::before{width:16px;height:2px}
.faq-x::after{width:2px;height:16px}
.faq-item.open .faq-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-item.open .faq-a{max-height:340px}
.faq-a p{color:var(--text-2);font-size:15px;line-height:1.65;padding:0 22px 22px}
.faq-a a{color:var(--gold)}

/* ── CTA ── */
.cta-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(40px,6vw,68px);text-align:center;position:relative;overflow:hidden;
}
.cta-card::before{
  content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:440px;height:340px;background:radial-gradient(closest-side,var(--glow),transparent 70%);
}
.cta-card>*{position:relative}
.cta-card h2{margin-top:14px}
.cta-card p{color:var(--text-2);font-size:17px;margin-top:14px;max-width:46ch;margin-inline:auto}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}