:root {
    --red: #ea3447;
    --dark: #333;
    --gray: #f5f5f5;
}

body { margin: 0; font-family: sans-serif; color: var(--dark); background: #fff; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Nav */
.navbar { height: 70px; border-bottom: 1px solid #eee; display: flex; align-items: center; position: sticky; top: 0; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); z-index: 100; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo { font-weight: bold; font-size: 20px; color: var(--red); }
.nav-links a { margin: 0 20px; color: #666; font-weight: 500; }
.btn-nav { border: 1px solid var(--dark); padding: 6px 18px; border-radius: 4px; font-size: 14px; }

/* Split Hero */
.split-hero { display: flex; height: 90vh; overflow: hidden; }
.split-left { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px; }
.hero-content { max-width: 500px; }
.label { color: var(--red); font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; }
.split-left h1 { font-size: 64px; line-height: 1.1; margin: 20px 0; }
.split-left p { font-size: 20px; color: #666; margin-bottom: 40px; }
.hero-btns { display: flex; align-items: center; gap: 20px; }
.btn-primary { background: var(--red); color: #fff; padding: 15px 40px; border-radius: 30px; font-weight: bold; transition: 0.3s; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(234, 52, 71, 0.3); }
.btn-link { color: #666; display: flex; align-items: center; gap: 8px; }

.split-right { flex: 1; background: #f9f9f9; position: relative; display: flex; align-items: center; justify-content: center; }
.abstract-shape {
    width: 400px; height: 400px; background: linear-gradient(45deg, #ffebee, #fff);
    border-radius: 50% 30% 70% 40%; position: absolute; animation: morph 8s infinite ease-in-out;
}
@keyframes morph {
    0% { border-radius: 50% 30% 70% 40%; }
    50% { border-radius: 30% 60% 40% 70%; }
    100% { border-radius: 50% 30% 70% 40%; }
}
.ui-card { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-radius: 12px; position: absolute; padding: 20px; }
.c1 { width: 240px; height: 160px; top: 30%; left: 20%; z-index: 2; animation: float 6s infinite; }
.c2 { width: 200px; height: 200px; bottom: 30%; right: 20%; z-index: 1; animation: float 6s infinite 1s; }
.sk-line { height: 10px; background: #eee; margin-bottom: 10px; border-radius: 5px; }
.l1 { width: 80%; } .l2 { width: 60%; }
.sk-chart { width: 100px; height: 100px; border-radius: 50%; border: 10px solid #eee; border-top-color: var(--red); margin: 20px auto; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* Z-Section */
.z-section { padding: 100px 0; }
.z-row { display: flex; align-items: center; margin-bottom: 120px; gap: 80px; }
.z-row.reverse { flex-direction: row-reverse; }
.z-text { flex: 1; }
.z-text h2 { color: var(--red); font-size: 14px; margin: 0 0 10px; text-transform: uppercase; }
.z-text h3 { font-size: 40px; margin: 0 0 20px; }
.z-text p { font-size: 18px; color: #666; line-height: 1.8; margin-bottom: 30px; }
.learn-more { font-weight: bold; border-bottom: 2px solid var(--red); padding-bottom: 4px; }

.z-visual { flex: 1; height: 400px; background: #f5f5f5; border-radius: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.v1 { background: #e3f2fd; } .v2 { background: #e8f5e9; } .v3 { background: #fff3e0; }
.visual-box { background: #fff; padding: 30px 50px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); text-align: center; }
.visual-box i { font-size: 40px; margin-bottom: 15px; display: block; color: var(--red); }

/* Footer */
.footer { padding: 40px 0; text-align: center; color: #999; border-top: 1px solid #eee; }