/* Basic, clean responsive styles for the Cody Chat landing */
:root{
  --bg:#f7f8fb; --accent:#0b69ff; --text:#1b1b1b; --muted:#6b7280;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--text); background:var(--bg); line-height:1.6}
.container{max-width:1100px; margin:0 auto; padding:28px}
.top-demo, .end-demo{position:fixed; right:14px; background:var(--accent); color:#fff; padding:10px 12px; border-radius:8px; text-decoration:none; z-index:1000}
.top-demo{top:14px}
.end-demo{bottom:14px}
.hero{color:#fff; padding:80px 0; background-size:cover; background-position:center}
.hero .container{display:flex; align-items:center; justify-content:space-between}
.hero-content{max-width:760px; background:rgba(0,0,0,0.35); padding:28px; border-radius:12px}
.hero h1{font-size:34px; margin:0 0 12px}
.hero .sub{color:#eef3ff; margin-bottom:18px}
.btn{display:inline-block; padding:12px 18px; border-radius:10px; text-decoration:none; font-weight:600}
.btn-demo{background:#fff; color:var(--accent); margin-right:10px}
.btn-contact{background:transparent; border:1px solid #fff; color:#fff}
.icon-mail{display:inline-block; margin-left:18px; color:#fff}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:26px}
.card{background:#fff; padding:18px; border-radius:12px; box-shadow:0 6px 18px rgba(9,10,14,0.06)}
.card h3{margin-top:10px}
.seo-article{background:#fff; padding:18px; margin:16px 0; border-radius:10px; box-shadow:0 6px 14px rgba(9,10,14,0.04)}
.seo-article h3{margin-top:0}
.cta{background:#fff; padding:24px; border-radius:10px; text-align:center; margin:24px 0}
.share a{margin:0 6px; text-decoration:none}
footer{margin-top:30px}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; background:#0b1220; color:#dbe6ff; padding:24px; border-radius:10px}
.footer-grid a{color:#bcd2ff}
.footer-bottom{background:#071029; color:#9fb0d6; text-align:center; padding:12px; margin-top:10px}
@media(max-width:700px){
  .hero .container{flex-direction:column}
  .hero h1{font-size:22px}
  .container{padding:18px}
  .footer-grid{grid-template-columns:1fr}
}