/* Celebrity Wireless — AI automation arm
   Shared stylesheet for all landing pages (index + 4 wedge modules).
   Plain, clean, confident. No external fonts/JS. Mobile-first responsive. */

:root {
  --ink:#16212b;
  --mut:#5b6b7a;
  --bg:#fafbfc;
  --acc:#1d6ef0;
  --acc2:#eef4ff;
  --line:#e5eaef;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.wrap { max-width:880px; margin:0 auto; padding:0 24px; }

/* ---- top nav (wedge pages share this; index can omit) ---- */
.nav { border-bottom:1px solid var(--line); background:#fff; }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; flex-wrap:wrap; gap:8px; }
.nav a.brand { font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.nav .links a { color:var(--mut); text-decoration:none; font-size:.92rem; margin-left:18px; }
.nav .links a:hover { color:var(--acc); }
.nav .links a.active { color:var(--acc); font-weight:600; }

/* ---- hero ---- */
header.hero { padding:80px 0 64px; text-align:center; }
.eyebrow { display:inline-block; color:var(--acc); background:var(--acc2); font-size:.82rem; font-weight:600; padding:5px 12px; border-radius:20px; margin-bottom:18px; letter-spacing:.01em; }
h1 { font-size:2.6rem; line-height:1.15; letter-spacing:-.02em; }
.sub { font-size:1.2rem; color:var(--mut); margin:20px auto 32px; max-width:600px; }

/* ---- CTA ---- */
.cta { display:inline-block; background:var(--acc); color:#fff; padding:14px 32px; border-radius:8px; font-weight:600; text-decoration:none; font-size:1.05rem; }
.cta:hover { filter:brightness(1.1); }
.cta-note { display:block; margin-top:12px; color:var(--mut); font-size:.9rem; }

/* ---- sections ---- */
section { padding:48px 0; }
h2 { font-size:1.6rem; margin-bottom:24px; letter-spacing:-.01em; }
.lead { color:var(--mut); font-size:1.05rem; max-width:640px; margin-bottom:24px; }

/* ---- benefit cards ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; }
.card h3 { font-size:1.02rem; margin-bottom:6px; }
.card p { color:var(--mut); font-size:.92rem; }

/* ---- pricing extras (reused on pricing.html cards) ---- */
.card .price { display:block; color:var(--acc); font-weight:700; font-size:1.15rem; margin:4px 0 8px; }
.card .price-note { display:block; color:var(--mut); font-size:.82rem; margin-top:10px; }
.price-line { color:var(--mut); font-size:1.02rem; margin-bottom:8px; }
.price-line strong { color:var(--ink); }
.faq { margin-top:8px; }
.faq .q { font-weight:600; margin-top:18px; }
.faq .a { color:var(--mut); margin-top:4px; }

/* ---- how-it-works steps ---- */
.steps { counter-reset:step; }
.step { display:flex; gap:16px; margin-bottom:20px; align-items:flex-start; }
.step .n { counter-increment:step; background:var(--acc2); color:var(--acc); font-weight:700; border-radius:50%; width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; }
.step .n::before { content:counter(step); }

/* ---- honest note ---- */
.honest { background:var(--acc2); border-radius:12px; padding:28px; }
.honest h2 { margin-bottom:10px; }
.honest p { color:#2b4258; }

/* ---- hub grid (index as hub) ---- */
.hub { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.hub a { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:24px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s; }
.hub a:hover { border-color:var(--acc); transform:translateY(-2px); }
.hub a h3 { font-size:1.1rem; margin-bottom:6px; }
.hub a p { color:var(--mut); font-size:.92rem; }
.hub a .go { display:inline-block; margin-top:12px; color:var(--acc); font-weight:600; font-size:.9rem; }

/* ---- footer ---- */
footer { padding:48px 0 64px; text-align:center; color:var(--mut); font-size:.92rem; }
footer a { color:var(--acc); text-decoration:none; }
.foot-links { margin-top:20px; }
.foot-links a { margin:0 10px; }

@media (max-width:600px){
  h1 { font-size:2rem; }
  header.hero { padding:56px 0 40px; }
  .nav .links a { margin-left:12px; }
}