:root{
    --bg:#ffffff; --txt:#111; --muted:#666; --line:#eaeaea; --brand:#111;
    --icon:#19a7ff; /* tweak to your accent color */
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.6,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial}
  .wrap{max-width:1180px;margin:auto;padding:0 16px}
  h1,h2{margin:0 0 12px}
  h1{font-size:28px;line-height:1.25}
  h2{font-size:24px;line-height:1.3}
  p.lead{color:var(--muted);margin:0 0 24px}

  /* Cards grid */
  .grid{display:grid;gap:18px}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.g4{grid-template-columns:1fr}}

  .card{position:relative;overflow:hidden;border-radius:14px;background:#f6f6f6;min-height:240px}
  .card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(0.85)}
  .card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.0),rgba(0,0,0,0.25))}

  .overlay{
    position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;
    display:flex;align-items:center;gap:10px
  }
  .overlay svg{width:28px;height:28px;flex:0 0 28px;stroke:#fff;opacity:.95}
  .overlay b{font-size:16px}

  /* Why choose row */
  .why-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:960px){.why-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.why-grid{grid-template-columns:1fr}}
  .why{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;min-height:120px}
  .why svg{width:28px;height:28px;stroke:var(--icon)}
  .why b{display:block;margin:8px 0 4px}
  .muted{color:var(--muted)}

  /* FAQ */
  .faq{border:1px solid var(--line);border-radius:14px;background:#fff}
  .faq details{border-bottom:1px solid var(--line)}
  .faq details:last-of-type{border-bottom:0}
  .faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;outline:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq .ans{padding:0 16px 14px 16px;color:var(--muted)}

  /* Section spacing */
  .sec{padding:28px 0}
  .center{text-align:center}