/* style.css - Teal & White theme for Optimacare Solutions */
:root{
  --teal: #1fb6a6;
  --dark-teal: #138a7a;
  --accent: #0b6b61;
  --light: #ffffff;
  --muted: #6b7280;
  --bg: #f7fafb;
  --card: #ffffff;
  --shadow: 0 6px 20px rgba(16,24,40,0.08);
  --radius: 12px;
  --max-width: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; background:var(--bg); color:#0f172a; -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.container{max-width:var(--max-width); margin:0 auto; padding:28px;}
.header{
  background:linear-gradient(180deg,var(--teal),var(--dark-teal));
  color:var(--light); padding:44px 0; border-bottom-left-radius:24px; border-bottom-right-radius:24px;
}
.header .top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:700; font-size:1.25rem; letter-spacing:0.2px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:rgba(255,255,255,0.95); text-decoration:none; font-weight:600}
.hero{display:flex; align-items:center; gap:32px; margin-top:18px; flex-wrap:wrap}
.hero .copy{flex:1 1 420px}
.hero h1{font-size:2rem; margin:0 0 12px}
.hero p{margin:0 0 18px; color:rgba(255,255,255,0.92)}
.cta{display:inline-block;background:var(--light);color:var(--accent);padding:12px 18px;border-radius:10px;font-weight:700}
.hero img{flex:1 1 360px; max-width:460px; border-radius:12px; box-shadow:var(--shadow);}

/* Features */
.features{padding:42px 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.card{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; color:var(--accent)}
.card p{margin:0; color:var(--muted)}

/* Services (cards) */
.services{padding:24px 0}
.service-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.service-card{background:linear-gradient(180deg,rgba(27,166,150,0.05),transparent); padding:18px; border-radius:12px; border:1px solid rgba(15,23,42,0.04)}

/* Testimonials */
.testimonials{padding:28px 0}
.testimonial{background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}

/* FAQ */
.faq{padding:18px 0}
.accordion{border-radius:12px; overflow:hidden}
.accordion button{width:100%; text-align:left; background:transparent; border:none; padding:14px; font-weight:700; cursor:pointer}
.accordion .panel{padding:14px; border-top:1px solid rgba(15,23,42,0.04); display:none; color:var(--muted)}

/* Contact */
.contact{display:flex; gap:24px; flex-wrap:wrap; padding:24px 0}
.form{flex:1; min-width:260px; background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.info{flex:1; min-width:220px}

/* Footer */
footer{padding:28px 0; color:var(--muted)}

/* Utility */
.center{text-align:center}
.small{font-size:0.9rem}
.badge{display:inline-block;padding:6px 10px;background:rgba(27,166,150,0.12); color:var(--accent); border-radius:999px; font-weight:700}

/* Responsive tweaks */
@media (max-width:720px){
  .hero h1{font-size:1.5rem}
  .header .top{flex-direction:column; align-items:flex-start}
}