/* Website: waves, role photo cards, richer sections */
.l-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--acc1) 8%, var(--bg)), var(--bg)); }
.l-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: var(--bg); clip-path: ellipse(75% 100% at 50% 100%); }
.l-hero h1 { text-shadow: 0 2px 30px color-mix(in srgb, var(--acc1) 25%, transparent); }
.l-section { position: relative; }
.l-section.alt { background: linear-gradient(180deg, var(--card-2), color-mix(in srgb, var(--acc1) 6%, var(--card-2))); }
.l-section.wavy::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 54px; background: var(--bg); clip-path: ellipse(60% 100% at 50% 0%); }
.l-section.alt.wavy::before { background: var(--bg); }
.trust-strip { background: linear-gradient(90deg, rgba(99, 102, 241, .08), rgba(236, 72, 153, .08), rgba(14, 165, 233, .08)); }
.trust-strip b { padding: 6px 14px; border-radius: 30px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(79, 70, 229, .08); }
.feature { background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--tb) 40%, var(--card))); position: relative; overflow: hidden; }
.feature::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: var(--tb); opacity: .5; transition: transform .4s; }
.feature:hover::after { transform: scale(1.5); }
.group-card { background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--tb) 35%, var(--card))); border-top: 4px solid var(--t); }
.role-photo { display: block; position: relative; overflow: hidden; border-radius: 26px; color: #fff; box-shadow: 0 22px 44px rgba(79, 70, 229, .18); transition: transform .35s, box-shadow .35s; }
.role-photo img { width: 100%; display: block; transition: transform .6s; }
.role-photo > div { position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(transparent, rgba(15, 23, 42, .85)); }
.role-photo b { display: block; font-size: 1.15rem; }
.role-photo span { font-size: .85rem; opacity: .85; }
.role-photo:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 30px 60px rgba(79, 70, 229, .3); color: #fff; }
.role-photo:hover img { transform: scale(1.07); }
.step span { background: linear-gradient(135deg, var(--acc1), #ec4899); }
.step { position: relative; overflow: hidden; }
.step::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--acc-soft); }
.stats-band { background: radial-gradient(500px 200px at 15% 0%, rgba(34, 211, 238, .35), transparent 60%), radial-gradient(500px 220px at 90% 100%, rgba(244, 114, 182, .4), transparent 60%), linear-gradient(135deg, #312e81, #6d28d9); }
.stats-band b { background: linear-gradient(90deg, #fff, #e9d5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-card { background: linear-gradient(160deg, var(--card), var(--acc-soft)); position: relative; }
.quote-card::before { content: '\201C'; position: absolute; right: 22px; top: 6px; font-size: 5rem; line-height: 1; color: var(--acc1); opacity: .15; font-family: Georgia, serif; }
.l-cta { position: relative; overflow: hidden; background: radial-gradient(500px 300px at 85% 0%, rgba(244, 114, 182, .55), transparent 60%), radial-gradient(500px 300px at 10% 100%, rgba(34, 211, 238, .4), transparent 60%), linear-gradient(135deg, #312e81, #6d28d9); }
.l-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .18) 1.2px, transparent 1.2px); background-size: 24px 24px; }
.l-cta .container { position: relative; }
.page-hero { background: radial-gradient(700px 360px at 85% 0%, rgba(236, 72, 153, .2), transparent 60%), radial-gradient(600px 360px at 0% 20%, rgba(34, 211, 238, .2), transparent 60%), radial-gradient(500px 300px at 50% 100%, rgba(99, 102, 241, .14), transparent 60%); }
.plan.popular { background: linear-gradient(180deg, color-mix(in srgb, var(--acc1) 10%, var(--card)), var(--card)); }
.l-footer { background: radial-gradient(500px 220px at 90% 0%, rgba(168, 85, 247, .3), transparent 60%), #0b1226; }