/* RCCB Pro — homepage styles */

/* HERO */
.rccb-hero { position: relative; overflow: hidden; padding: clamp(60px, 8vw, 110px) 0; border-top: none; }
.rccb-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.rccb-hero-bg .rccb-track-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--rccb-blue); }
.rccb-hero-glow { position: absolute; top: -40%; right: -10%; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(34,211,238,.18), transparent); filter: blur(20px); }
.rccb-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.rccb-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rccb-hero-headline { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0 0 16px; background: linear-gradient(180deg, #fff 0%, #b9c4cf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rccb-hero-subhead { font-size: 1.1rem; color: var(--rccb-silver); max-width: 60ch; }
.rccb-hero-ctas { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.rccb-hero-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 22px; color: var(--rccb-muted); font-size: .9rem; }
.rccb-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

.rccb-hero-stage { display: grid; gap: 16px; }
.rccb-stage-card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius-lg); padding: 20px; box-shadow: var(--rccb-shadow-lg); }
.rccb-stage-speedo { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; }
.rccb-speedo-svg { width: 100%; height: auto; }
.rccb-speedo-needle { transform-origin: 100px 100px; animation: rccb-needle 3.6s ease-in-out infinite alternate; }
@keyframes rccb-needle { 0% { transform: rotate(-40deg); } 100% { transform: rotate(40deg); } }
.rccb-speedo-meta { display: flex; flex-direction: column; gap: 4px; }
.rccb-stage-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rccb-stage-product h3 { margin: 4px 0; }

/* QUICK START */
.rccb-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.rccb-quick-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--rccb-surface); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius); padding: 16px; cursor: pointer; color: var(--rccb-text); text-align: left; transition: border-color .15s ease, transform .12s ease; font: inherit; }
.rccb-quick-card:hover { border-color: var(--rccb-blue); transform: translateY(-2px); }
.rccb-quick-card.is-active { border-color: var(--rccb-blue); box-shadow: var(--rccb-glow); }
.rccb-quick-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(34,211,238,.1); color: var(--rccb-blue); }
.rccb-quick-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--rccb-muted); font-size: .85rem; margin-top: 4px; }

/* CATEGORIES */
.rccb-cat-grid { gap: 14px; }
.rccb-cat-card { display: flex; flex-direction: column; gap: 8px; background: var(--rccb-surface); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius); padding: 18px; color: var(--rccb-text); transition: border-color .15s ease, transform .12s ease; }
.rccb-cat-card:hover { border-color: var(--rccb-blue); transform: translateY(-2px); text-decoration: none; }
.rccb-cat-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(34,211,238,.1); color: var(--rccb-blue); }
.rccb-cat-link { color: var(--rccb-blue); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }

/* RELATED */
.rccb-related .rccb-related-card { background: var(--rccb-surface); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius); padding: 18px; }
.rccb-related-card h3 { margin: 8px 0 12px; }

/* BEGINNER HUB */
.rccb-beg-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; }

/* FAQ */
.rccb-faq-list { display: grid; gap: 8px; }
.rccb-faq-item { background: var(--rccb-surface); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius); }
.rccb-faq-item[open] { border-color: var(--rccb-blue); }
.rccb-faq-item summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 700; list-style: none; }
.rccb-faq-item summary::-webkit-details-marker { display: none; }
.rccb-faq-body { padding: 0 18px 16px; color: var(--rccb-silver); }

/* NEWSLETTER */
.rccb-newsletter { background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(34,255,136,.04)); }
.rccb-newsletter-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; }
.rccb-newsletter-form { display: flex; gap: 8px; }
.rccb-newsletter-form input { flex: 1; background: var(--rccb-surface-2); border: 1px solid var(--rccb-line); color: var(--rccb-text); padding: 12px 14px; border-radius: 10px; }

/* TRUST */
.rccb-trust .rccb-trust-card { background: var(--rccb-surface); border: 1px solid var(--rccb-line); border-radius: var(--rccb-radius); padding: 18px; }
.rccb-trust-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(34,211,238,.1); color: var(--rccb-blue); margin-bottom: 10px; }

/* 404 */
.rccb-404 { padding: 60px 20px; }
.rccb-404-head { text-align: center; margin-bottom: 30px; }
.rccb-404-code { display: inline-block; font-family: var(--rccb-font-head); font-size: 3rem; font-weight: 800; color: var(--rccb-orange); background: rgba(255,122,26,.1); padding: 4px 16px; border-radius: 12px; }
.rccb-404-affbox { max-width: 720px; margin: 0 auto 40px; }
.rccb-404 section { margin-bottom: 40px; }

@media (max-width: 900px) {
	.rccb-hero-grid { grid-template-columns: 1fr; }
	.rccb-beg-grid { grid-template-columns: 1fr; }
	.rccb-newsletter-inner { grid-template-columns: 1fr; }
	.rccb-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.rccb-stage-speedo { grid-template-columns: 1fr; text-align: center; }
}