:root{
    --ink:#0f172a; --muted:#64748b; --bg:#ffffff; --panel:#ffffff; --border:#e6eef6; --shadow:0 1px 2px rgba(15,23,42,.06);
    --brand:#0d5cab; --brand-ink:#094b8d; --blue:#9ad3f0; --orange:#ffc27c;
    --maxw:1120px; --radius:12px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  a:hover{color:var(--brand)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
  .muted{color:var(--muted)}
  :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:999px;padding:.65rem 1rem;border:1px solid var(--border);font-size:14px;line-height:1;text-decoration:none;transition:all 0.2s ease}
  .btn-blue{background:var(--blue);color:#0b2741;border-color:transparent}
  .btn-orange{background:var(--orange);color:#3b2404;border-color:transparent}
  .btn:hover{filter:brightness(.97)}
  .btn-chip{padding:.45rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--border);font-weight:700}
  .btn-chip[aria-pressed="true"]{background:rgba(154,211,240,.2);border-color:#cfe7f8}

  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
  /* .nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .brand{display:flex;align-items:center;gap:.75rem}
  .brand img{height:32px}
  .brand-name{font-weight:900}
  /* nav.menu{display:flex;gap:18px}
  .menu a{opacity:.92}
  .menu a[aria-current="page"]{opacity:1;border-bottom:2px solid var(--ink);padding-bottom:6px}
  .menu-cta{margin-left:6px} */
  .burger{display:none;border:0;background:none;font-size:24px;line-height:1;padding:6px} */

  .page-hero{padding:42px 0 10px;border-bottom:1px solid var(--border);background:linear-gradient(90deg, rgba(154,211,240,.18), rgba(255,194,124,.18))}
  .page-hero h1{margin:0 0 6px;font-size:clamp(24px,3.6vw,34px)}

  .filterbar{position:sticky;top:64px;z-index:15;background:#fff;border-bottom:1px solid var(--border)}
  .filterbar .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 20px}
  .search{margin-left:auto;display:flex;align-items:center;gap:8px}
  .search input{border:1px solid var(--border);border-radius:999px;padding:.55rem .9rem;min-width:220px;outline:none}
  .search input:focus{border-color:#cfe7f8;box-shadow:0 0 0 3px #eaf6ff}

  .section{padding:28px 0 56px}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
  .card img{object-fit:cover}
  .card .body{padding:16px;display:flex;flex-direction:column;gap:6px}
  .card h3{margin:0;font-size:18px}
  .meta{font-size:13px;color:var(--muted)}
  .card .actions{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap}
  .empty{border:1px dashed var(--border);border-radius:var(--radius);padding:24px;text-align:center;color:var(--muted)}

  footer{border-top:1px solid var(--border)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:18px 20px}
  footer .small{font-size:13px;color:var(--muted)}

  @media (max-width:960px){.grid{grid-template-columns:1fr 1fr}}
  /* Index.php specific styles */
  .steps{background:var(--light)}
  .steps .wrap{padding:48px 20px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:var(--white);border:1px solid #eee;border-radius:var(--radius);padding:20px}
  .card h3{margin:4px 0 8px;font-size:18px}
  
  .services .wrap{padding:48px 20px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .svc{border:1px solid #eee;border-radius:var(--radius);overflow:hidden;background:var(--white);display:flex;flex-direction:column}
  .svc img{object-fit:cover}
  .svc .body{padding:16px;display:flex;flex-direction:column;gap:10px}
  .svc .body p{margin:0;color:#555}
  .svc .actions{padding:16px;padding-top:0}
  
  .why{background:var(--light)}
  .why .wrap{padding:48px 20px}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .pill{border:1px solid #eee;background:var(--white);border-radius:var(--radius);padding:18px}
  .pill h4{margin:6px 0 6px}
  
  .contact-strip{background:var(--blue);color:var(--dark)}
  .contact-strip .wrap{padding:28px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
  .contact-strip p{margin:0;font-weight:600}
  .btn-chat{background:var(--white);border:1px solid #cfe7f3}
  .btn-wa{background:var(--green);color:var(--white)}
  
  /* Index.php responsive */
  @media (max-width:900px){
    .cards,.grid-3,.pillars{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    nav.menu{display:none}
    .burger{display:block}
    .search{margin-left:0;width:100%}
    .search input{flex:1;min-width:0;width:100%}
    .grid{grid-template-columns:1fr}
    .cards,.grid-3,.pillars{grid-template-columns:1fr}
  }