*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;color:#1a1a2e;background:#fff;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.layout{display:flex;min-height:100vh}
.hero-left{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0f4ff 0%,#faf5ff 100%);overflow:hidden;position:relative}
.hero-right{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:2.5rem}
.hero-right-inner{max-width:440px;padding-left:3rem}

.brand{display:flex;align-items:center;gap:0.5rem;margin-bottom:2.5rem}
.brand img{height:32px;width:auto}

.hero-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;line-height:1.25;margin-bottom:0.75rem;letter-spacing:-0.02em;color:#1a1a2e}
.hero-title span{color:#2563eb}
.hero-sub{font-size:clamp(0.9rem,1.2vw,1rem);color:rgba(26,26,46,0.45);margin-bottom:1.75rem;max-width:400px;font-weight:400}
.hero-cta{display:flex;gap:0.75rem;flex-wrap:wrap}

.btn-primary,.btn-outline{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border-radius:6px;font-weight:600;font-size:0.9rem;transition:all 0.2s ease;cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8}
.btn-outline{background:transparent;border-color:rgba(26,26,46,0.12);color:rgba(26,26,46,0.6)}
.btn-outline:hover{border-color:rgba(26,26,46,0.2);color:#1a1a2e;background:rgba(37,99,235,0.04)}
.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,0.3);transform:scale(0);animation:rippleAnim 0.5s ease-out;pointer-events:none}
.btn-outline .ripple-effect{background:rgba(37,99,235,0.1)}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

.hero-art{position:absolute;inset:-30%;display:flex;align-items:center;justify-content:center}
.blob{position:absolute;border-radius:42% 58% 70% 30% / 45% 45% 55% 55%;animation:morph 10s ease-in-out infinite}
.blob-1{width:min(60vw,500px);height:min(60vw,500px);background:linear-gradient(135deg,rgba(37,99,235,0.2),rgba(124,58,237,0.15));animation-delay:0s}
.blob-2{width:min(50vw,400px);height:min(50vw,400px);background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(236,72,153,0.08));animation-delay:-3.5s}
.blob-3{width:min(40vw,320px);height:min(40vw,320px);background:linear-gradient(135deg,rgba(124,58,237,0.12),rgba(37,99,235,0.06));animation-delay:-6s}
@keyframes morph{0%,100%{border-radius:42% 58% 70% 30% / 45% 45% 55% 55%;transform:translate(0,0) rotate(0deg) scale(1)}33%{border-radius:58% 42% 42% 58% / 55% 55% 45% 45%;transform:translate(5%,-3%) rotate(4deg) scale(1.05)}66%{border-radius:33% 67% 58% 42% / 50% 40% 60% 50%;transform:translate(-4%,4%) rotate(-3deg) scale(0.95)}}

section{padding:3.5rem 1.5rem;position:relative}

.features{background:#f8fafc}
.features-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:960px;margin:0 auto}
.feature-card{cursor:default;transition:all 0.3s ease}
.feature-card:hover{opacity:0.65}
.feature-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-bottom:0.75rem;color:rgba(37,99,235,0.4)}
.feature-icon svg{width:20px;height:20px}
.feature-card h3{font-size:0.85rem;font-weight:600;margin-bottom:0.3rem;color:#1a1a2e}
.feature-card p{font-size:0.8rem;color:rgba(26,26,46,0.4);line-height:1.6;font-weight:400}

.cta-section{text-align:center;padding:4rem 1.5rem 2.5rem}
.cta-section h2{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:700;margin-bottom:0.5rem;color:#1a1a2e}
.cta-section p{color:rgba(26,26,46,0.45);margin-bottom:1.5rem;font-size:0.9rem}
.footer-bar{margin-top:3rem;font-size:0.75rem;color:rgba(26,26,46,0.2)}
.footer-bar a{color:rgba(26,26,46,0.3)}
.footer-bar a:hover{color:#2563eb}

.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .layout{flex-direction:column;min-height:auto}
  .hero-left{min-height:40vh;padding:0}
  .hero-right{justify-content:center;padding:2.5rem 1.5rem 3rem;text-align:center}
  .hero-right-inner{max-width:100%;padding-left:0}
  .brand{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .features-inner{grid-template-columns:repeat(2,1fr);text-align:center}
  .feature-icon{margin-left:auto;margin-right:auto}
}

@media(max-width:480px){
  .features-inner{grid-template-columns:1fr;gap:1.5rem}
  .hero-right{padding:2rem 1.25rem}
  .hero-left{min-height:30vh}
}