/* Simple responsive styles inspired by the provided design */
:root{--accent:#e94b35;--blue:#1e9bd1;--muted:#f4f6f8;font-family:Inter,Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:#222;background:#fff}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{background:#fff;border-bottom:1px solid #eee}
.topbar .container{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700;color:var(--accent)}
.contact a{color:#222;text-decoration:none}

.hero{padding:60px 0;background:linear-gradient(180deg,#fff 0%,#f7fbfd 60%)}
.hero-inner{display:flex;gap:30px;align-items:center}
.hero-left{flex:1}
.hero-left h1{font-size:34px;margin:0 0 10px}
.hero-left p{color:#666;margin:0 0 18px}
.btn{display:inline-block;padding:10px 16px;border-radius:6px;background:var(--blue);color:#fff;text-decoration:none;margin-right:10px}
.btn.alt{background:#fff;color:var(--blue);border:1px solid #e6eef4}

.hero-right{flex:1;text-align:center}
.hero-right img{max-width:100%;border-radius:6px;box-shadow:0 10px 30px rgba(30,155,209,0.08)}

.features{padding:60px 0;text-align:center}
.cards{display:flex;gap:20px;justify-content:center;margin-top:20px}
.card{flex:1;max-width:260px;background:#fff;padding:20px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.04)}

.demo{padding:40px 0;text-align:center}
.mockup img{max-width:720px;width:100%;box-shadow:0 20px 40px rgba(0,0,0,0.06);border-radius:8px}

.contact{display:flex;gap:30px;padding:60px 0;align-items:flex-start}
.contact-left{flex:1}
.contact-right{flex:1}

.footer{background:var(--accent);color:#fff;padding:24px 0;margin-top:30px}
.footer .container{display:flex;justify-content:space-between;align-items:center}
.small{opacity:0.9;font-size:14px}

@media(max-width:800px){
  .hero-inner{flex-direction:column}
  .cards{flex-direction:column}
  .contact{flex-direction:column}
  .footer .container{flex-direction:column;gap:10px}
}