/* styles.css - simple responsive styles */
:root{
  --accent1:#FF3B30; /* red */
  --accent2:#FFD60A; /* yellow */
  --accent3:#0033A0; /* blue */
  --max-width:1100px;
  --bg:#f7f7f8;
  --muted:#666;
}
*{box-sizing:border-box}
body{font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif; margin:0; color:#222; background:var(--bg); line-height:1.5}
.container{max-width:var(--max-width); margin:0 auto; padding:28px}
.site-header{background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:20}
.header-inner{display:flex; gap:16px; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; font-weight:700; color:var(--accent3); text-decoration:none}
.nav{display:flex; gap:12px}
.nav a{color:var(--muted); text-decoration:none; padding:10px 8px; border-radius:6px}
.nav a:hover{background:#f0f0f0; color:#000}
.cta{background:var(--accent3); color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none}

.hero{background:linear-gradient(90deg, rgba(255,59,48,0.05), rgba(0,51,160,0.02)); padding:48px 0; margin-bottom:16px}
.hero h1{font-size:28px; margin:0 0 8px}
.hero p{margin:6px 0}
.btn{display:inline-block; background:var(--accent1); color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none}
.features .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.card{background:#fff; padding:14px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.thumb{height:120px; background:#ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#777}
.placeholder{background:linear-gradient(90deg,#eee,#ddd)}

.trust{margin:30px 0; background:#fff; padding:18px; border-radius:8px}
.site-footer{background:#fff; border-top:1px solid #eee; padding:18px 0; margin-top:30px}
.site-footer .container{display:flex; justify-content:space-between; gap:12px; align-items:center}

@media(max-width:800px){
  .header-inner{flex-direction:column; align-items:flex-start}
  .nav{flex-wrap:wrap}
  .site-footer .container{flex-direction:column; align-items:flex-start}
}