/* ServIndy SEO landing pages — shared light theme */
:root{
  --bg:#f4f3fb; --tint:#efeafb; --surface:#fff; --surface-2:#faf9ff;
  --border:#e7e3f4; --border-2:#d8d2ec;
  --ink:#191235; --text:#39354f; --muted:#5f5b79;
  --brand:#7c3aed; --brand2:#9333ea;
  --accent:#7c3aed; --accent2:#9333ea;
  --shadow:0 10px 30px rgba(40,20,90,.08); --shadow-sm:0 4px 14px rgba(40,20,90,.06); --shadow-lg:0 26px 60px rgba(40,20,90,.15);
  --radius:24px; --radius2:16px; --max:1080px;
}
body.acc-band{ --accent:#be185d; --accent2:#9d174d; }
body.acc-est{ --accent:#0f766e; --accent2:#0e7490; }
body.acc-tool{ --accent:#7c3aed; --accent2:#0f766e; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(820px 460px at 8% -6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(720px 460px at 98% -2%, rgba(147,51,234,.07), transparent 58%),
    var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
a{ color:var(--brand); text-decoration:none; } a:hover{ text-decoration:underline; }
img{ max-width:100%; }
.wrap{ max-width:var(--max); margin:0 auto; padding:14px 16px 56px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 12px 0; font-weight:800; }
.skip:focus{ left:0; }

/* nav */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); position:sticky; top:10px; z-index:50; }
.brand{ display:flex; align-items:center; }
.brand img{ height:36px; width:auto; display:block; }
.navlinks{ display:flex; gap:8px; align-items:center; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:999px; border:1px solid var(--border-2); background:#fff; color:var(--ink); font-weight:760; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .14s ease, border-color .14s, color .2s; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn.primary{ border:none; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 34%,transparent); }
.btn.primary:hover{ color:#fff; filter:brightness(1.05); }
.btn.lg{ padding:14px 24px; font-size:1.04rem; font-weight:800; }
.btn.ghost{ background:transparent; box-shadow:none; border-color:transparent; }
.btn.ghost:hover{ background:var(--surface-2); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* breadcrumb */
.crumbs{ font-size:.85rem; color:var(--muted); margin:18px 4px 4px; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--brand); }

/* hero */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center; margin-top:14px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--tint); background:color-mix(in srgb,var(--accent) 12%,white); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 26%,white); font-weight:800; font-size:.8rem; letter-spacing:.02em; }
.hero h1{ margin:14px 0 0; font-size:clamp(2rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.02em; color:var(--ink); font-weight:900; }
.hero h1 .hl{ background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub{ margin:14px 0 0; color:var(--muted); font-size:1.08rem; max-width:60ch; }
.cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.chip{ font-size:.8rem; font-weight:760; color:var(--accent); background:var(--tint); background:color-mix(in srgb,var(--accent) 9%,white); border:1px solid color-mix(in srgb,var(--accent) 22%,white); padding:5px 11px; border-radius:999px; }
.hero-media{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); aspect-ratio:4/3; background:var(--surface-2) center/cover no-repeat; }

.store-row{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px; }
.store-row .lbl{ color:var(--muted); font-size:.78rem; font-weight:760; letter-spacing:.04em; text-transform:uppercase; }
.store{ display:flex; align-items:center; padding:8px 13px; border-radius:12px; border:1px solid var(--border-2); background:#fff; color:var(--ink); font-weight:760; box-shadow:var(--shadow-sm); font-size:.9rem; line-height:1.1; }
.store:hover{ border-color:var(--accent); text-decoration:none; }
.store small{ display:block; font-weight:640; opacity:.65; font-size:.68rem; }

/* sections */
.section{ margin-top:40px; }
.section > h2{ margin:0 0 6px; font-size:clamp(1.5rem,2.8vw,1.95rem); letter-spacing:-.015em; color:var(--ink); font-weight:900; }
.section > .sub{ margin:0 0 18px; color:var(--muted); font-size:1.02rem; max-width:70ch; }
.prose p{ color:var(--text); font-size:1.04rem; max-width:72ch; }
.prose h2{ margin:36px 0 8px; font-size:clamp(1.4rem,2.6vw,1.8rem); color:var(--ink); font-weight:900; letter-spacing:-.01em; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card{ border-radius:var(--radius2); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); padding:18px; }
.card h3{ margin:0 0 6px; font-size:1.06rem; color:var(--ink); font-weight:820; letter-spacing:-.01em; }
.card p{ margin:0; color:var(--muted); font-size:.94rem; }
.card .ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:11px; background:color-mix(in srgb,var(--accent) 11%,white); border:1px solid color-mix(in srgb,var(--accent) 22%,white); }
.card .ic svg{ width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* simple bulleted list */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.checks li{ display:flex; gap:10px; align-items:flex-start; color:var(--text); font-size:1rem; }
.checks svg{ width:20px; height:20px; flex:0 0 auto; stroke:var(--accent); fill:none; stroke-width:2.2; margin-top:2px; }

/* related links */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.related a{ display:block; border:1px solid var(--border); border-radius:var(--radius2); background:var(--surface); padding:16px; box-shadow:var(--shadow-sm); color:var(--ink); font-weight:800; }
.related a:hover{ border-color:var(--accent); text-decoration:none; transform:translateY(-2px); transition:transform .12s; }
.related a span{ display:block; margin-top:4px; color:var(--muted); font-weight:500; font-size:.9rem; }

/* faq */
.faq{ border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); padding:6px 10px 10px; }
.faq details{ border-bottom:1px solid var(--border); }
.faq details:last-child{ border-bottom:none; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 12px; font-weight:820; color:var(--ink); display:flex; justify-content:space-between; gap:10px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); flex:0 0 auto; transition:transform .14s; }
.faq details[open] summary .chev{ transform:rotate(45deg); border-color:var(--accent); }
.faq .faq-body{ padding:0 12px 16px; color:var(--muted); }

/* final cta */
.cta-final{ margin-top:44px; border-radius:var(--radius); color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 24px 56px color-mix(in srgb,var(--accent) 34%,transparent); padding:30px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cta-final h2{ margin:0; font-size:clamp(1.4rem,2.8vw,1.85rem); font-weight:900; letter-spacing:-.015em; }
.cta-final p{ margin:6px 0 0; color:rgba(255,255,255,.95); font-weight:600; max-width:60ch; }
.cta-final .btn{ background:#fff; color:var(--accent); border:none; }
.cta-final .btn.outline{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.55); }

/* footer */
.footer{ margin-top:40px; color:var(--muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; padding:14px 4px 0; border-top:1px solid var(--border); }
.footer a{ color:var(--brand); font-weight:760; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; }
  .hero-media{ order:-1; aspect-ratio:16/9; }
  .grid, .related{ grid-template-columns:1fr; }
  .cta-final{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }