:root{
  --bg: #ffffff;
  --text: #0f172a;      /* slate-900 */
  --muted: #475569;     /* slate-600 */
  --primary: #1d4ed8;   /* blue-700 for accessible contrast */
  --accent: #f59e0b;    /* amber-500 */
  --surface: #f8fafc;   /* slate-50 */
  --border: #e2e8f0;    /* slate-200 */
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin-inline:auto;padding:0 20px}

.skip-link{
  position:absolute;
  left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:#fff;border:2px solid var(--primary);padding:10px 14px;border-radius:8px;z-index:10000}

.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px}

.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text)}
.brand-text{letter-spacing:.2px}
.brand-accent{color:var(--primary)}

.site-nav ul{list-style:none; padding:0; margin:0; display:flex; gap:22px}
.site-nav a{font-weight:600; color:var(--text)}
.site-nav a:hover{color:var(--primary)}

.nav-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle .bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:transform .2s ease, opacity .2s ease}

@media (max-width: 860px){
  .nav-toggle{display:block}
  .site-nav{position:fixed; inset:66px 0 auto 0; background:#fff; border-bottom:1px solid var(--border);
    transform:translateY(-120%); transition:transform .25s ease; will-change:transform}
  .site-nav.open{transform:translateY(0)}
  .site-nav ul{flex-direction:column; gap:0}
  .site-nav li{border-top:1px solid var(--border)}
  .site-nav a{display:block; padding:14px 20px}
}

.section{padding:72px 0}
.section h2{font-size:clamp(1.6rem, 2vw + 1rem, 2.1rem); margin:0 0 12px}
.lead{font-size:clamp(1.05rem, 1vw + .5rem, 1.25rem); color:var(--muted)}

.grid-2{display:grid; grid-template-columns: 1.2fr .8fr; gap:36px; align-items:center}
@media (max-width: 860px){ .grid-2{grid-template-columns:1fr} }

.hero{background:
  radial-gradient(1200px 600px at 80% -10%, rgba(29,78,216,.10), transparent),
  linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  overflow:hidden;
}
.hero-copy h1{font-size:clamp(2rem, 3.5vw + 1rem, 3rem); line-height:1.1; margin:0 0 12px}
.cta-group{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; font-weight:700; border:2px solid transparent; transition: transform .06s ease, box-shadow .2s ease}
.btn:active{transform: translateY(1px)}
.btn-primary{background:var(--primary); color:#fff; box-shadow: 0 8px 20px rgba(29,78,216,.25)}
.btn-primary:hover{box-shadow: 0 10px 24px rgba(29,78,216,.35)}
.btn-ghost{border-color:var(--border); color:var(--text); background:#fff}
.btn-ghost:hover{border-color:var(--primary)}

.trust-points{display:flex; gap:18px; margin:18px 0 0; padding:0; list-style:none; color:var(--muted); flex-wrap:wrap}
.trust-points li{display:flex; align-items:center; gap:8px}
.trust-points li::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--accent)}

.hero-visual{position:relative; height:320px}
.shape-ring{position:absolute; width:240px; height:240px; right:10%; top:20%; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.25), rgba(29,78,216,0) 70%);
  border: 1px dashed rgba(29,78,216,.35);
}
.shape-bars{position:absolute; bottom:10%; right:16%; display:flex; align-items:flex-end; gap:12px}
.shape-bars span{display:block; width:14px; background: linear-gradient(180deg, var(--primary), #3b82f6); border-radius:6px; box-shadow:var(--shadow)}
.shape-bars span:nth-child(1){height:80px}
.shape-bars span:nth-child(2){height:120px}
.shape-bars span:nth-child(3){height:160px}

.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px 18px; box-shadow:var(--shadow)}
.checklist{list-style:none; padding:0; margin:0}
.checklist li{padding:8px 0 8px 28px; position:relative}
.checklist li::before{content:""; position:absolute; left:4px; top:12px; width:14px; height:14px; border-radius:50%; background:linear-gradient(180deg, #10b981, #059669)}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
@media (max-width: 860px){ .cards{grid-template-columns:1fr} }
.card.service h3{margin-top:6px}

.about{background:var(--surface)}

.contact-card .contact-list{list-style:none; padding:0; margin:0}
.contact-list li{display:flex; align-items:center; gap:10px; padding:6px 0}
.contact-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.site-footer{border-top:1px solid var(--border); background:#fff}
.footer-inner{display:flex; align-items:center; gap:18px; justify-content:space-between; padding:20px 0; flex-wrap:wrap}
.footer-nav a{margin-right:12px}
.brand-mini{display:flex; align-items:center; gap:8px; color:var(--muted)}

.noscript-note{margin:10px; padding:12px 14px; border:1px solid var(--border); background:#fff9e6; border-radius:10px}

/* Better focus styles */
:where(a, button):focus{outline:3px solid var(--accent); outline-offset:2px}

/* Scroll offsets so anchors aren't hidden behind sticky header */
#about, #services, #contact, #faq{scroll-margin-top:80px}