/* Anugraham Smart Homes — service subpage stylesheet
   Matches the main landing page's design tokens exactly */
:root {
  --navy: #0d2149;
  --navy-light: #16305f;
  --gold: #f2a93b;
  --gold-dark: #d98f1e;
  --text-light: #cdd7ea;
  --bg: #f7f8fb;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: #1a2233;
  line-height: 1.5;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Top bar */
.topbar { background: var(--navy); color:#fff; padding: 10px 0; font-size: 13.5px; }
.topbar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.topbar .contact-line { display:flex; gap:22px; flex-wrap:wrap; }
.topbar .contact-line span { display:flex; align-items:center; gap:6px; color:var(--text-light); }
.topbar a.call { color:#fff; font-weight:700; }

/* Header */
header.site { background:#fff; padding: 16px 0; border-bottom: 1px solid #e8ebf1; position:sticky; top:0; z-index:20; }
header.site .container { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .name { font-size:20px; font-weight:800; color:var(--navy); letter-spacing:0.3px; }
.brand .name span { color:var(--gold-dark); }
.brand .tag { font-size:11.5px; color:#5a6478; }
.btn {
  display:inline-block; background: var(--gold); color: var(--navy); font-weight:800;
  padding: 12px 26px; border-radius: 30px; font-size:15px; border:none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(242,169,59,0.4); }
.btn.outline { background:transparent; color:#fff; border:2px solid #fff; }
.btn.outline:hover { background:rgba(255,255,255,0.12); }
.btn.outline.dark { color:var(--navy); border-color:var(--navy); }

/* Breadcrumb */
.crumb { font-size:13px; color:#5a6478; padding:16px 0; }
.crumb a { color:var(--navy); font-weight:600; }

/* Service hero */
.svc-hero { background: linear-gradient(120deg, var(--navy), var(--navy-light)); color:#fff; padding: 56px 0 64px; }
.svc-hero .container { display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center; }
.eyebrow { display:inline-block; background:rgba(242,169,59,0.15); color:var(--gold); font-weight:700;
  font-size:12.5px; letter-spacing:0.6px; padding:6px 14px; border-radius:20px; margin-bottom:14px; }
.svc-hero h1 { font-size:34px; font-weight:800; margin-bottom:14px; line-height:1.25; }
.svc-hero p.lead { color: var(--text-light); font-size:15.5px; margin-bottom:26px; max-width:46ch; }
.cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.svc-hero-card { background:#fff; border-radius:14px; padding:26px; color:#1a2233; }
.svc-hero-card h3 { color:var(--navy); font-size:17px; margin-bottom:6px; }
.svc-hero-card ul { list-style:none; margin-top:14px; }
.svc-hero-card li { display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:14px; }
.svc-hero-card li::before { content:"✓"; color:var(--gold-dark); font-weight:800; }

/* Section head */
.section-head { text-align:center; max-width:640px; margin:0 auto 40px; }
.kicker { color:var(--gold-dark); font-weight:700; font-size:13px; letter-spacing:0.6px; text-transform:uppercase; }
.section-head h2 { font-size:26px; font-weight:800; color:var(--navy); margin:8px 0 10px; }
.section-head p { color:#5a6478; font-size:14.5px; }

section { padding: 60px 0; }

/* Feature grid */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature-card { background:#fff; border-radius:14px; padding:26px 22px; box-shadow:0 4px 18px rgba(13,33,73,0.06); }
.feature-card .icon { font-size:26px; margin-bottom:12px; }
.feature-card h3 { font-size:16px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.feature-card p { font-size:13.5px; color:#5a6478; }

/* Process */
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.process-card { text-align:center; padding: 10px; }
.process-card .step {
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--navy);
  font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center;
}
.process-card h4 { font-size:15px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.process-card p { font-size:13px; color:#5a6478; }

/* Related services */
.related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.related-card { background:#fff; border-radius:12px; padding:18px; border:1px solid #e8ebf1; font-size:14px; font-weight:700; color:var(--navy); }
.related-card .go { display:block; margin-top:6px; font-size:12.5px; color:var(--gold-dark); font-weight:700; }
.related-card:hover { border-color:var(--gold); }

/* Final CTA */
.final-cta { background: linear-gradient(120deg, var(--navy), var(--navy-light)); color:#fff; text-align:center; padding: 64px 0; }
.final-cta h2 { font-size:28px; font-weight:800; margin-bottom:14px; }
.final-cta p { color: var(--text-light); font-size:15px; margin-bottom:26px; }

/* Footer */
footer { background:#0a1834; color: var(--text-light); padding: 34px 0; font-size:13px; }
footer .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; }
footer .brand-mini { color:#fff; font-weight:700; }

/* WhatsApp float */
.wa-float {
  position:fixed; bottom:22px; right:22px; background:#25d366; color:#fff;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow: 0 10px 26px rgba(37,211,102,0.5); z-index:999;
}

@media (max-width: 860px) {
  .svc-hero .container { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-3, .process-grid, .related-grid { grid-template-columns: 1fr; }
  .topbar .container { flex-direction:column; align-items:flex-start; }
  .svc-hero h1 { font-size:26px; }
}