/* v4 */
*, *::before, *::after { box-sizing: border-box; }

/* Fixed video background */
.video-bg { position: fixed; inset: 0; z-index: 0; }
.video-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-overlay { position: absolute; inset: 0; background: rgba(9,9,11,0.7); }

/* Content wrapper over video */
.kwe-content { position: relative; z-index: 10; min-height: 100vh; padding-top: 80px; font-family: 'Inter', sans-serif; }

/* Legacy alias */
.kwe-page { position: relative; z-index: 10; min-height: 100vh; padding-top: 80px; font-family: 'Inter', sans-serif; }

/* Utility glass */
.crimson-glass { background: rgba(24,24,27,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(220,38,38,0.2); }

/* Amber CTA button — matches Lovable amber gradient rounded-full */
.btn-amber { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(to right, #f59e0b, #d97706); color: #000; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.125rem; padding: 1.25rem 2.5rem; border-radius: 9999px; text-decoration: none; transition: all 0.5s cubic-bezier(0.175,0.885,0.32,1.275); box-shadow: 0 0 30px rgba(251,191,36,0.4); width: 100%; }
.btn-amber:hover { background: linear-gradient(to right, #fbbf24, #f59e0b); box-shadow: 0 0 50px rgba(251,191,36,0.6); }

/* Phases grid — 1 col / 2 col / 3 col */
.phases-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .phases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .phases-grid { grid-template-columns: repeat(3, 1fr); } }

/* Phase card icon scale on hover */
.phase-card .phase-icon-wrap { transition: transform 0.3s; }
.phase-card:hover .phase-icon-wrap { transform: scale(1.1); }

/* Outcomes grid — 1 col / 2 col */
.outcomes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }

/* Who-this-is-for grid — 1 col / 2 col */
.who-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }

/* Offer inner — 1 col / 2 col on large */
.offer-inner { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .offer-inner { grid-template-columns: repeat(2, 1fr); } }

/* Transformation pills row */
.transform-row { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* Avatar cluster (overlapping circles) */
.avatar-cluster { display: flex; align-items: center; justify-content: center; }
.avatar-cluster > div { width: 3rem; height: 3rem; border-radius: 9999px; background: linear-gradient(135deg, #ef4444, #dc2626); border: 2px solid #09090b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-cluster > div + div { margin-left: -0.75rem; }