:root{--bg-a: #f7fbff;--bg-b: #fef9f6;--accent: #5a8dee;--accent-2: #ff7da6;--text: #24324a;--muted: #60738a;--card: #ffffff}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:linear-gradient(135deg,var(--bg-a),var(--bg-b));font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text)}.wrap{padding:32px 28px;max-width:1200px;margin:0 auto}.hero{text-align:center;margin-bottom:28px}.hero h1{font-family:Montserrat,sans-serif;letter-spacing:.5px;font-size:42px;margin:0 0 10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{margin:0;color:var(--muted);font-size:16px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:stretch}.card{grid-column:span 4;background:var(--card);border-radius:18px;padding:20px;box-shadow:0 10px 18px #5a8dee1a,0 4px 10px #24324a0f;position:relative;overflow:hidden;transition:transform .3s ease}.card:nth-child(2){grid-column:span 8}.card:nth-child(4){grid-column:span 5}.card:nth-child(5){grid-column:span 7}.card:hover{transform:translateY(-2px)}.icon{width:120px;height:120px;display:block;margin:4px 0 14px;filter:drop-shadow(0 6px 10px rgba(36,50,74,.08))}.card h2{margin:0 0 6px;font-size:22px;font-weight:700}.desc{margin:0 0 16px;color:var(--muted);line-height:1.6}.badge{position:absolute;top:14px;right:14px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.4px}.foot{margin-top:30px;text-align:center;color:var(--muted);font-size:13px}@media (min-width: 1600px){.wrap{max-width:1400px}}.card:after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;background:radial-gradient(circle at 30% 30%,#5a8dee2e,#ff7da61f);border-radius:40% 60% 50% 70%;transform:rotate(15deg)}.card:nth-child(odd):after{left:-30px;right:auto;top:-30px;bottom:auto;transform:rotate(-12deg)}