*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#FAFAFA;font-family:'Zilla Slab',serif;font-weight:400;font-size:16px;line-height:1.8;color:#4A4A4A;overflow-x:hidden}
.spine{position:fixed;left:38%;top:0;bottom:0;width:1px;background:#333;z-index:0;opacity:0.3}
.hero-section{min-height:100vh;display:flex;align-items:center;padding:60px 40px;position:relative;z-index:1}
.hero-left{max-width:40%;opacity:0;transform:translateY(20px);transition:all 0.5s ease}
.hero-left.visible{opacity:1;transform:translateY(0)}
h1{font-family:'Zilla Slab',serif;font-weight:700;font-size:clamp(32px,5vw,64px);color:#1A1A1A;margin-bottom:12px}
.hero-desc{color:#4A4A4A;max-width:360px}
.block{min-height:60vh;display:flex;align-items:center;padding:60px 40px;position:relative;z-index:1}
.block-right{justify-content:flex-end}
.block-left{justify-content:flex-start}
.block-inner{max-width:480px;padding:40px;background:#F0F0F0;border-radius:4px;border-left:3px solid transparent;border-image:linear-gradient(180deg,#A78BFA,#4ECDC4,#FF6B6B) 1;opacity:0;transform:translateY(20px);transition:all 0.7s cubic-bezier(0.68,-0.55,0.265,1.55)}
.block-inner.visible{opacity:1;transform:translateY(0)}
.caption{font-family:'Zilla Slab',serif;font-weight:300;font-size:13px;letter-spacing:0.06em;color:#8A8A8A;display:block;margin-bottom:8px}
h2{font-family:'Zilla Slab',serif;font-weight:700;font-size:28px;color:#1A1A1A;margin-bottom:12px}
@media(max-width:768px){.spine{display:none}.hero-left{max-width:100%}.block{padding:40px 20px}.block-inner{padding:28px}h1{font-size:32px}}