/* home.css — homepage-specific components (extends main.css). */

/* Alternating section backgrounds */
.section.alt { background: var(--deep); }

/* Hero stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 3.5rem; }
.statb { text-align: center; }
.statb-n { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--gold-2); line-height: 1; }
.statb-l { display: block; font-size: var(--fs-xs); color: var(--dim); text-transform: uppercase; letter-spacing: .12em; margin-top: .5rem; }

/* Tick lists */
.ticks { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.ticks li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--dim); }
.ticks li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }

/* Process */
.proc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.pstep { position: relative; padding-top: .5rem; }
.pnum { font-family: var(--font-display); font-size: 2.4rem; color: var(--border-2); display: block; margin-bottom: .3rem; }
.quote { margin-top: 2.5rem; text-align: center; }
.quote cite { display: block; margin-top: 1rem; color: var(--dim); font-style: normal; font-size: var(--fs-sm); }

/* Portfolio metric */
.metric { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-2); }

/* Pricing */
.plan { display: flex; flex-direction: column; }
.plan.best { border-color: var(--gold); box-shadow: var(--glow); }
.plan-price { font-family: var(--font-display); font-size: 2rem; color: var(--gold-2); margin: .3rem 0; }
.plan .ticks { flex: 1; margin-bottom: 1rem; }

/* FAQ */
.faq { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.2rem; background: var(--card); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; color: var(--cream); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold); }
.faq[open] summary::after { content: "–"; }
.faq p { margin-top: .8rem; color: var(--dim); font-size: var(--fs-sm); }

/* Form inputs */
#contact-form input, #contact-form textarea {
  width: 100%; padding: .8rem; background: var(--black); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--cream); resize: vertical;
}
#contact-form input:focus, #contact-form textarea:focus { outline: none; border-color: var(--gold); }

@media (max-width: 640px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}