/* Home hero — original composition, no stock photo */
.hero { background: radial-gradient(1200px 600px at 85% -10%, #2f7bff 0%, rgba(47, 123, 255, 0) 60%), radial-gradient(900px 500px at -10% 110%, #1237a8 0%, rgba(18, 55, 168, 0) 60%), linear-gradient(135deg, #07154a 0%, #0a2a8a 55%, #0b57ff 120%); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); pointer-events: none; }
.hero-inner { position: relative; padding-block: 4.5rem 5.5rem; }
.hero h1 { color: #fff; }
.hero h1 .accent { background: linear-gradient(90deg, #8fd0ff, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: rgba(255, 255, 255, .82); }
.hero .pill { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.hero .pill svg { color: #8fd0ff; }
.hero .btn-primary { background: #fff; color: var(--blue-600); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.hero .btn-primary:hover { background: #eef4ff; }
.hero .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .12); }

.hero-visual { position: relative; min-height: 460px; display: grid; place-items: center; color: #fff; }
.orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .7; }
.orb-a { width: 280px; height: 280px; background: #3d8bff; top: 0; right: 4%; }
.orb-b { width: 220px; height: 220px; background: #7a5cff; bottom: 0; left: 6%; opacity: .45; }
.ring { position: absolute; width: 520px; max-width: 120%; color: #fff; animation: spin 60s linear infinite; }
.glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px; box-shadow: 0 24px 60px rgba(3, 12, 50, .45); }

.main-card { position: relative; width: min(400px, 100%); padding: 1.5rem; animation: float 7s ease-in-out infinite; }
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; opacity: .95; }
.mc-badge { background: rgba(255, 255, 255, .95); color: var(--blue-600); font-weight: 700; font-size: .75rem; padding: .25rem .7rem; border-radius: 999px; }
.mc-amount { margin: 1.4rem 0 1.2rem; }
.mc-amount small { display: block; opacity: .75; font-size: .8rem; }
.mc-amount strong { font-size: 2.6rem; letter-spacing: -.03em; line-height: 1.1; }
.mc-bar { height: 8px; background: rgba(255, 255, 255, .22); border-radius: 99px; overflow: hidden; }
.mc-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #8fd0ff, #fff); animation: fill 2.4s .5s ease-out forwards; }
.mc-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: .9rem 0 0; padding: 0; font-size: .7rem; text-align: center; opacity: .6; }
.mc-steps li.on { opacity: 1; font-weight: 600; }
.mc-steps span { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .4); margin: 0 auto .35rem; }
.mc-steps li.on span { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.mc-foot { display: flex; gap: .5rem; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .8rem; opacity: .9; }
.mc-ico { width: 18px; height: 18px; flex: none; display: block; }
.mc-ico svg { width: 100%; height: 100%; }

.chip { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 16px; font-size: .82rem; }
.chip b { display: block; line-height: 1.2; }
.chip small { opacity: .8; font-size: .72rem; }
.chip .tick { width: 30px; height: 30px; border-radius: 50%; background: #25c26e; display: grid; place-items: center; flex: none; }
.chip .tick svg { width: 16px; height: 16px; }
.chip-a { top: 2%; left: -2%; animation: float 6s 1s ease-in-out infinite; }
.chip-b { bottom: 4%; right: -2%; animation: float 8s .4s ease-in-out infinite; }
.sample-tag { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: .7rem; opacity: .6; white-space: nowrap; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fill { to { width: 38%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .main-card, .chip, .ring { animation: none; } .mc-bar i { animation: none; width: 38%; } }
@media (max-width: 960px) { .hero-inner { padding-block: 3rem 4rem; } .hero-visual { min-height: 420px; } .chip-a { left: 0; } .chip-b { right: 0; } .ring { display: none; } }
@media (max-width: 480px) { .chip { font-size: .75rem; padding: .55rem .75rem; } .chip small { display: none; } .mc-amount strong { font-size: 2.2rem; } }