/* styles.css - Simple, modern responsive styles for CloudPages upload */
:root{
  --bg:#f7fafc;--card:#fff;--accent:#2baf6a;--muted:#6b7280;--max:1100px;
  --radius:12px; --shadow: 0 6px 18px rgba(15,23,42,0.08);
}
*{box-sizing:border-box}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; margin:0; background:var(--bg); color:#0f172a; line-height:1.45}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:28px}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;padding:8px;margin:8px;background:#111;color:#fff;border-radius:6px;left:8px}
.topbar{background:#fff;padding:14px 24px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#38b2ac,#2baf6a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px}
.topbar h1{margin:0;font-size:16px}
.tag{margin:0;font-size:12px;color:var(--muted)}

/* nav */
.nav{display:flex;gap:12px}
.nav a{font-size:14px;color:var(--muted);padding:6px;border-radius:6px}
.nav a:hover{background:#f1f5f9;color:#0f172a}

/* hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:stretch;padding:28px;max-width:1200px;margin:18px auto;min-height:360px}
.hero-content{background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0.8));padding:28px;border-radius:14px;box-shadow:var(--shadow)}
.hero h2{font-size:32px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0}
.hero-cta{margin-top:14px;display:flex;gap:10px}
.hero-image{background-image:url('https://images.unsplash.com/photo-1560184897-6b6d7d1a9f59?q=80&w=1200&auto=format&fit=crop&s=0c2e6c1b5e2f3a4b5c6d7e8f');background-size:cover;border-radius:14px;box-shadow:var(--shadow)}

/* sections */
.section{padding:34px 0}
.pale{background:#fff}
.lead{color:var(--muted)}

/* grid and cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-image{height:160px;background-size:cover;background-position:center}
.card h4{margin:14px 16px 0}
.card p{margin:8px 16px 16px;color:var(--muted);flex:1}
.card .btn{margin:0 16px 16px}

/* form */
.form-card{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}
.row input, .row select, textarea{flex:1;padding:10px;border-radius:8px;border:1px solid #e6edf3;font-size:14px}
textarea{min-height:80px;resize:vertical}
.actions{display:flex;gap:10px;align-items:center}

/* buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:600}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid #e6edf3}
.btn.small{padding:8px 10px;font-size:13px}

/* aside */
.aside{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow);height:100%}
.benefits{list-style:none;padding:0;margin:12px 0;color:var(--muted)}
.benefits li{margin:8px 0}

/* who */
.who{display:flex;gap:20px;align-items:center}
.who .stats{display:flex;gap:12px}
.who .stats div{background:#fff;padding:10px;border-radius:10px;box-shadow:var(--shadow);text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{background:#fff;padding:8px 12px;border-radius:999px;box-shadow:var(--shadow)}

/* testimonials */
.carousel{display:flex;gap:12px;overflow:auto;padding:6px 0}
.quote{background:#fff;padding:16px;border-radius:12px;min-width:260px;box-shadow:var(--shadow)}

/* footer */
.footer{background:#0f172a;color:#fff;padding:30px 0;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.footer a{color:#cbd5e1}

/* responsive */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:420px}
  .nav{display:none}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px}
  .who{flex-direction:column}
  .grid-2{display:block}
}