/* Home page redesign preview (index2.php). Same tokens as hire-an-expert.css / aboutus.php / recommended.css. */
.hp-hero, .hp-strip, .hp-steps, .hp-cats, .hp-plans, .hp-included, .hp-spotlight, .hp-ai, .hp-paths, .hp-experts, .hp-scale, .hp-locations, .hp-trust, .hp-testimonials, .hp-affiliate, .hp-industries, .hp-community, .hp-cta {
  --hp-ink: #060845;
  --hp-muted: #4a4f6a;
  --hp-accent: #4035c8;
  --hp-accent-dark: #2f269e;
  --hp-green: #00a650;
  --hp-line: #e3e5f2;
  --hp-bg: #f6f7fc;
  color: var(--hp-ink);
}
.hp-wrap { position: relative; z-index: 1; max-width: 1172px; margin: 0 auto; padding: 0 16px; }
.hp-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hp-accent); margin-bottom: 12px;
}
.hp-hero h1, .hp-cats h2, .hp-plans h2, .hp-included h2, .hp-spotlight h2, .hp-ai h2, .hp-paths h2, .hp-experts h2, .hp-scale h2, .hp-trust h2, .hp-testimonials h2, .hp-affiliate h2, .hp-industries h2, .hp-community h2, .hp-cta h2 {
  text-transform: none; letter-spacing: 0;
}
.hp-hero-topline {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--hp-accent-dark);
  background: #fff2d6; border: 1px solid #ffe1a3; border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
}
.hp-hero-topline .svg-icon { width: 14px; height: 14px; fill: #b26b00; }
.hp-hero-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-hero-chips li { margin: 0; }
.hp-hero-chips a {
  display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--hp-ink); text-decoration: none;
  background: #fff; border: 1px solid var(--hp-line); border-radius: 999px; padding: 6px 14px;
}
.hp-hero-chips a:hover, .hp-hero-chips a:focus-visible { border-color: var(--hp-accent); color: var(--hp-accent); }

/* Buttons */
#dedicated a.hp-btn, a.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 10px 22px; border-radius: 10px; background: var(--hp-accent); color: #fff;
  font-weight: 700; font-size: 16px; border: 2px solid var(--hp-accent); text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
#dedicated a.hp-btn:hover, #dedicated a.hp-btn:focus-visible { background: var(--hp-accent-dark); border-color: var(--hp-accent-dark); color: #fff; }
#dedicated a.hp-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
#dedicated a.hp-btn-ghost:hover, #dedicated a.hp-btn-ghost:focus-visible { background: #fff; border-color: #fff; color: var(--hp-ink); }
#dedicated a.hp-btn-ghost-light { background: #fff; border-color: var(--hp-line); color: var(--hp-ink); }
#dedicated a.hp-btn-ghost-light:hover, #dedicated a.hp-btn-ghost-light:focus-visible { background: #fff; border-color: var(--hp-accent); color: var(--hp-accent); }
.hp-btn .svg-icon { width: 16px; height: 16px; fill: currentColor; }

/* Hero: light background, no dark gradient block (used everywhere else on the site) so it reads
   as its own thing, and so a large dark gradient can't go unreadable again the way it did before. */
.hp-hero { background: #fff; padding: 68px 0 64px; position: relative; overflow: hidden; }
.hp-hero-blob {
  position: absolute; top: -220px; right: -160px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 53, 200, .12) 0%, rgba(64, 53, 200, 0) 70%); pointer-events: none;
}
.hp-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hp-hero h1 { color: var(--hp-ink); font-size: clamp(32px, 4.4vw, 50px); line-height: 1.12; font-weight: 800; margin: 0 0 18px; }
.hp-hero-accent { color: var(--hp-accent); }
.hp-lead { font-size: 18px; line-height: 1.65; color: var(--hp-muted); margin: 0 0 28px; max-width: 600px; }
.hp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hp-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hp-hero-badges .small-note { font-size: 14px; color: var(--hp-muted); font-weight: 600; }

/* Hero right: server status card */
.hp-stack-card { position: relative; background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 8px; box-shadow: 0 24px 48px rgba(6, 8, 69, .12); }
.hp-stack-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px 10px; }
.hp-stack-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hp-line); }
.hp-stack-head span:last-child { font-size: 13px; font-weight: 700; color: var(--hp-muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.hp-stack-list { list-style: none; margin: 0; padding: 0; }
.hp-stack-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid #eceef6; }
.hp-stack-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--hp-accent); box-shadow: 0 0 0 4px rgba(64, 53, 200, .14); }
.hp-stack-name { flex: 1; font-size: 15px; font-weight: 700; color: var(--hp-ink); }
.hp-stack-name em { font-style: normal; font-weight: 500; color: var(--hp-muted); margin-left: 6px; }
.hp-stack-pill { flex: none; font-size: 12.5px; font-weight: 700; color: var(--hp-accent); background: #efedfb; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.hp-stack-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px; margin-top: 4px; border-top: 1px solid #eceef6; }
.hp-stack-foot span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--hp-ink); }
.hp-stack-foot .svg-icon { width: 14px; height: 14px; fill: var(--hp-accent); }
.hp-hero-facts { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 18px 28px; }
.hp-hero-facts li { margin: 0; }
.hp-hero-facts b { font-size: 20px; font-weight: 800; color: var(--hp-ink); }
.hp-hero-facts span { display: block; font-size: 13px; color: var(--hp-muted); margin-top: 2px; }

/* Section heads */
.hp-cats, .hp-plans, .hp-included, .hp-spotlight, .hp-ai, .hp-paths, .hp-experts, .hp-scale, .hp-locations, .hp-trust, .hp-testimonials, .hp-affiliate, .hp-industries, .hp-community { padding: 60px 0; }
/* Fewer, wider bands: several sections share one background so the page reads as a handful of
   zones, not sixteen stacked boxes with a seam at every join. Only the closing CTA stays dark,
   as one deliberate bookend, not a random band in the middle. */
.hp-strip, .hp-steps, .hp-cats { background: #fff; }
.hp-plans, .hp-included, .hp-spotlight, .hp-ai { background: var(--hp-bg); }
.hp-plans { position: relative; overflow: hidden; }
.hp-plans::before {
  content: ""; position: absolute; top: -260px; left: -200px; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 53, 200, .08) 0%, rgba(64, 53, 200, 0) 70%); pointer-events: none;
}
.hp-paths, .hp-experts, .hp-scale { background: #fff; }
.hp-locations, .hp-trust, .hp-testimonials { background: var(--hp-bg); }
.hp-affiliate, .hp-industries { background: #fff; }
.hp-community { background: var(--hp-bg); }
.hp-cats h2, .hp-plans h2, .hp-included h2, .hp-spotlight h2, .hp-ai h2, .hp-paths h2, .hp-experts h2, .hp-scale h2, .hp-trust h2, .hp-testimonials h2, .hp-affiliate h2, .hp-industries h2, .hp-community h2 {
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; font-weight: 800; margin: 0 0 12px; color: var(--hp-ink);
}

/* Payment / trust strip */
.hp-strip { padding: 28px 0; }
.hp-strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.hp-strip-note { font-size: 14px; font-weight: 700; color: var(--hp-muted); text-transform: uppercase; letter-spacing: .04em; }
.hp-strip-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.hp-strip-logos img { height: 22px; width: auto; display: block; opacity: .85; }
.hp-strip-facts { display: flex; flex-wrap: wrap; gap: 20px; }
.hp-strip-facts span { font-size: 14px; font-weight: 600; color: var(--hp-ink); display: flex; align-items: center; gap: 7px; }
.hp-strip-facts .svg-icon { width: 16px; height: 16px; fill: var(--hp-green); }

/* How it works steps */
.hp-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 10px; counter-reset: hpstep; }
.hp-step { position: relative; padding: 28px 24px 24px; background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 16px; }
.hp-step::before {
  counter-increment: hpstep; content: counter(hpstep); position: absolute; top: -16px; left: 24px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--hp-accent); color: #fff; font-weight: 800; font-size: 15px; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(64, 53, 200, .3);
}
.hp-step-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; margin-bottom: 16px; box-shadow: 0 4px 10px rgba(6, 8, 69, .06); }
.hp-step-icon .svg-icon { width: 22px; height: 22px; fill: var(--hp-accent); }
.hp-step h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--hp-ink); text-transform: none; }
.hp-step p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 0; }

/* Plan comparison */
.hp-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.hp-plan { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; }
.hp-plan--featured { border-color: var(--hp-accent); box-shadow: 0 14px 32px rgba(64, 53, 200, .14); position: relative; }
.hp-plan-badge { position: absolute; top: -13px; left: 22px; background: var(--hp-accent); color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 12px; border-radius: 999px; }
.hp-plan h3 { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: var(--hp-ink); text-transform: none; }
.hp-plan-price { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hp-line); }
.hp-plan-price b { font-size: 30px; font-weight: 800; color: var(--hp-ink); }
.hp-plan-price span { font-size: 14px; color: var(--hp-muted); }
.hp-plan-specs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; flex: 1; }
.hp-plan-specs li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--hp-muted); margin: 0; }
.hp-plan-specs .svg-icon { width: 15px; height: 15px; fill: var(--hp-green); margin-top: 3px; flex: none; }
.hp-plan-foot { text-align: center; font-size: 14px; color: var(--hp-muted); margin-top: 14px; }
.hp-plan-foot a { color: var(--hp-accent); text-decoration: underline; }

/* Included tools grid */
.hp-included-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.hp-inc { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 22px; }
.hp-inc-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eeedfb; margin-bottom: 14px; }
.hp-inc-icon .svg-icon { width: 22px; height: 22px; fill: var(--hp-accent); }
.hp-inc h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; color: var(--hp-ink); text-transform: none; }
.hp-inc p { font-size: 14.5px; line-height: 1.55; color: var(--hp-muted); margin: 0; }

/* Feature spotlight (reseller / white-label) */
.hp-spotlight-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 44px; align-items: center; }
.hp-spotlight-tags { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 10px; }
.hp-spotlight-tags li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--hp-muted); margin: 0; }
.hp-spotlight-tags .svg-icon { width: 17px; height: 17px; fill: var(--hp-green); margin-top: 3px; flex: none; }
.hp-spotlight-visual { background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 16px; padding: 28px; text-align: center; }
.hp-spotlight-visual .svg-icon { width: 56px; height: 56px; fill: var(--hp-accent); margin-bottom: 16px; }
.hp-spotlight-visual b { display: block; font-size: 26px; font-weight: 800; color: var(--hp-ink); }
.hp-spotlight-visual span { display: block; font-size: 14px; color: var(--hp-muted); margin-top: 4px; }
.hp-spotlight-visual-row { display: flex; justify-content: center; gap: 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hp-line); }

/* AI showcase */
.hp-ai-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
.hp-ai-card { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 26px 24px; }
.hp-ai-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #eeedfb; margin-bottom: 16px; }
.hp-ai-icon .svg-icon { width: 24px; height: 24px; fill: var(--hp-accent); }
.hp-ai-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--hp-ink); text-transform: none; }
.hp-ai-card p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 0 0 16px; }
.hp-ai-card a { font-weight: 700; font-size: 15px; color: var(--hp-accent); text-decoration: none; }
.hp-ai-card a:hover, .hp-ai-card a:focus-visible { color: var(--hp-accent-dark); text-decoration: underline; }

/* Scale progression */
.hp-scale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; position: relative; }
.hp-scale-grid::before { content: ""; position: absolute; top: 44px; left: 6%; right: 6%; height: 2px; background: var(--hp-line); z-index: 0; }
.hp-scale-step { position: relative; z-index: 1; background: #fff; padding: 0 14px; text-align: center; }
.hp-scale-icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; background: var(--hp-bg); border: 1px solid var(--hp-line); }
.hp-scale-icon .svg-icon { width: 34px; height: 34px; fill: var(--hp-accent); }
.hp-scale-step h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; color: var(--hp-ink); text-transform: none; }
.hp-scale-step p { font-size: 13.5px; color: var(--hp-muted); margin: 0 0 8px; line-height: 1.5; }
.hp-scale-step em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--hp-accent-dark); }

/* Testimonials */
.hp-testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
.hp-testi { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; }
.hp-testi .svg-icon.hp-quote { width: 22px; height: 22px; fill: var(--hp-line); margin-bottom: 12px; }
.hp-testi h3 { font-size: 17px; font-weight: 800; margin: 0 0 10px; color: var(--hp-ink); text-transform: none; }
.hp-testi p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 0 0 18px; flex: 1; }
.hp-testi-person { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hp-line); }
.hp-testi-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.hp-testi-person b { display: block; font-size: 14.5px; color: var(--hp-ink); }
.hp-testi-source { font-size: 13px; color: var(--hp-muted); text-align: center; margin: 20px 0 0; }
.hp-testi-source a { color: var(--hp-accent); text-decoration: underline; }
.hp-intro { font-size: 17px; line-height: 1.65; color: var(--hp-muted); max-width: 720px; margin: 0 0 30px; }
.hp-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hp-head-row .hp-intro { margin-bottom: 0; }
.hp-more-link { flex: none; font-weight: 700; color: var(--hp-accent); text-decoration: none; font-size: 15.5px; margin-bottom: 4px; }
.hp-more-link:hover, .hp-more-link:focus-visible { color: var(--hp-accent-dark); text-decoration: underline; }

/* Categories */
.hp-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
.hp-cat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 26px 24px; }
.hp-cat-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #eeedfb; margin-bottom: 16px; }
.hp-cat-icon .svg-icon { width: 24px; height: 24px; fill: var(--hp-accent); }
.hp-cat h3 { font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--hp-ink); margin: 0 0 8px; text-transform: none; }
.hp-cat p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 0 0 16px; }
.hp-cat-links { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-content: flex-start; }
.hp-cat-links li { margin: 0; }
.hp-cat-links a { display: inline-block; border: 1px solid var(--hp-line); background: var(--hp-bg); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--hp-ink); text-decoration: none; transition: border-color .15s, color .15s; }
.hp-cat-links a:hover, .hp-cat-links a:focus-visible { border-color: var(--hp-accent); color: var(--hp-accent); }
.hp-cat-more { font-weight: 700; font-size: 15px; color: var(--hp-accent); text-decoration: none; border-top: 1px solid #eceef6; padding-top: 14px; }
.hp-cat-more:hover, .hp-cat-more:focus-visible { color: var(--hp-accent-dark); }

/* Paths */
.hp-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
.hp-path { background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column; }
.hp-path-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; margin-bottom: 16px; box-shadow: 0 4px 10px rgba(6, 8, 69, .06); }
.hp-path-icon .svg-icon { width: 24px; height: 24px; fill: var(--hp-accent); }
.hp-path h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--hp-ink); text-transform: none; }
.hp-path p { font-size: 15px; line-height: 1.6; color: var(--hp-muted); margin: 0 0 18px; flex: 1; }
.hp-path-tags { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.hp-path-tags li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--hp-muted); margin: 0; }
.hp-path-tags .svg-icon { width: 15px; height: 15px; fill: var(--hp-green); margin-top: 3px; flex: none; }
.hp-path a.hp-path-link { font-weight: 700; font-size: 15px; color: var(--hp-accent); text-decoration: none; }
.hp-path a.hp-path-link:hover, .hp-path a.hp-path-link:focus-visible { color: var(--hp-accent-dark); text-decoration: underline; }

/* Experts band */
.hp-experts-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hp-experts-tags { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 10px; }
.hp-experts-tags li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--hp-muted); margin: 0; }
.hp-experts-tags .svg-icon { width: 17px; height: 17px; fill: var(--hp-green); margin-top: 3px; flex: none; }
.hp-experts-tags b { color: var(--hp-ink); }
.hp-experts-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-task-card { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(6, 8, 69, .1); }
.hp-task-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.hp-task-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-line); }
.hp-task-head span { font-size: 13px; font-weight: 700; color: var(--hp-muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.hp-task-item { display: flex; align-items: center; gap: 14px; padding: 14px; border-top: 1px solid #eceef6; }
.hp-task-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--hp-bg); display: flex; align-items: center; justify-content: center; }
.hp-task-icon .svg-icon { width: 20px; height: 20px; fill: var(--hp-accent); }
.hp-task-info { flex: 1; min-width: 0; }
.hp-task-info b { display: block; font-size: 15px; color: var(--hp-ink); }
.hp-task-info span { display: block; font-size: 13px; color: var(--hp-muted); margin-top: 1px; }
.hp-task-price { flex: none; text-align: right; }
.hp-task-price b { display: block; font-size: 17px; font-weight: 800; color: var(--hp-ink); }
.hp-task-price span { display: block; font-size: 12px; color: var(--hp-muted); }

/* Trust */
.hp-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.hp-trust-card { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 24px 22px; text-align: left; }
.hp-trust-card .svg-icon { width: 26px; height: 26px; fill: var(--hp-accent); margin-bottom: 14px; }
.hp-trust-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--hp-ink); text-transform: none; }
.hp-trust-card p { font-size: 14.5px; line-height: 1.6; color: var(--hp-muted); margin: 0; }

/* Bar chart and radial gauge cards (real, verified numbers only) */
.hp-trust-chart h3 { font-size: 15px; font-weight: 800; margin: 0 0 16px; }
.hp-bars { display: flex; align-items: flex-end; gap: 14px; height: 110px; margin-bottom: 8px; }
.hp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hp-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--hp-accent) 0%, var(--hp-accent-dark) 100%); min-height: 6px; }
.hp-bar-col em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--hp-ink); margin-top: 6px; }
.hp-bar-col span { font-size: 11.5px; color: var(--hp-muted); margin-top: 1px; }
.hp-trust-chart p { text-align: center; margin-top: 4px; }
.hp-trust-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-trust-gauge h3 { margin: 14px 0 4px; }
.hp-trust-gauge p { text-align: center; }
.hp-gauge {
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--hp-accent) calc(var(--val) * 1%), var(--hp-line) 0);
  display: flex; align-items: center; justify-content: center;
}
.hp-gauge span { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--hp-ink); }
.hp-gauge-rating span { font-size: 20px; }

/* Locations */
.hp-loc-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 22px 0 32px; padding: 18px 0; border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }
.hp-loc-stats div { display: flex; align-items: baseline; gap: 8px; }
.hp-loc-stats b { font-size: 26px; font-weight: 800; color: var(--hp-ink); }
.hp-loc-stats span { font-size: 13.5px; color: var(--hp-muted); }
/* One panel, one row per region, so a region with more countries just wraps onto more lines
   instead of sitting in a box that's taller than its neighbours. */
.hp-loc-panel { background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 8px 22px; }
.hp-loc-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 22px; padding: 18px 0; border-top: 1px solid #eceef6; }
.hp-loc-row:first-child { border-top: 0; }
.hp-loc-row h3 { flex: 0 0 168px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--hp-ink); margin: 6px 0 0; text-transform: none; }
.hp-loc-row h3 .svg-icon { width: 15px; height: 15px; fill: var(--hp-accent); flex: none; }
.hp-loc-chips { flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-loc-chip {
  display: flex; align-items: flex-start; gap: 8px; min-height: 44px; max-width: 260px; padding: 8px 14px;
  background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 10px;
}
.hp-loc-flag { flex: none; font-size: 18px; line-height: 1.3; margin-top: 1px; }
.hp-loc-chip b, .hp-loc-chip em { display: block; }
.hp-loc-chip b { font-size: 14px; font-weight: 700; color: var(--hp-ink); line-height: 1.3; }
.hp-loc-chip em { font-style: normal; font-size: 12px; color: var(--hp-muted); line-height: 1.4; }
.hp-trust-card a { color: var(--hp-accent); text-decoration: underline; }

/* Affiliate band */
.hp-affiliate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.hp-affiliate-facts { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hp-affiliate-facts li { background: #fff; border: 1px solid var(--hp-line); border-radius: 12px; padding: 14px 16px; margin: 0; }
.hp-affiliate-facts b { display: block; font-size: 20px; font-weight: 800; color: var(--hp-accent-dark); }
.hp-affiliate-facts span { display: block; font-size: 13px; color: var(--hp-muted); margin-top: 2px; }
.hp-affiliate-visual { background: #060845; border-radius: 16px; padding: 26px; color: #fff; forced-color-adjust: none; }
@media (forced-colors: active) { .hp-affiliate-visual * { forced-color-adjust: none; } }
.hp-affiliate-visual h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: #b9b4ff; margin: 0 0 16px; font-weight: 800; }
.hp-affiliate-visual ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hp-affiliate-visual li { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255, 255, 255, .14); padding-bottom: 12px; }
.hp-affiliate-visual li:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-affiliate-visual li span:first-child { font-size: 14px; color: #cfd0f0; }
.hp-affiliate-visual li b { font-size: 17px; color: #fff; }

/* Industries */
.hp-industries-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.hp-industry { display: flex; align-items: center; gap: 12px; background: var(--hp-bg); border: 1px solid var(--hp-line); border-radius: 12px; padding: 16px 18px; }
.hp-industry .svg-icon, .hp-industry i { flex: none; width: 20px; height: 20px; fill: var(--hp-accent); font-size: 20px; color: var(--hp-accent); }
.hp-industry span { font-size: 15px; font-weight: 600; color: var(--hp-ink); }

/* Community strip */
.hp-community-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; padding: 22px 26px; }
.hp-community-row p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--hp-muted); max-width: 640px; }
.hp-community-row p b { color: var(--hp-ink); }
.hp-community-links { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-community-links a { border: 1px solid var(--hp-line); background: var(--hp-bg); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14.5px; color: var(--hp-ink); text-decoration: none; }
.hp-community-links a:hover, .hp-community-links a:focus-visible { border-color: var(--hp-accent); color: var(--hp-accent); }

/* Final CTA */
.hp-cta { background-color: #060845; background: linear-gradient(135deg, #060845 0%, #1d1a78 55%, #4035c8 100%); padding: 64px 0; text-align: center; forced-color-adjust: none; }
@media (forced-colors: active) { .hp-cta * { forced-color-adjust: none; } }
.hp-cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 14px; }
.hp-cta p { color: #dcdcf5; font-size: 17px; line-height: 1.65; max-width: 640px; margin: 0 auto 28px; }
.hp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

@media (max-width: 991.98px) {
  .hp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-hero { padding: 48px 0 44px; }
  .hp-hero-facts { gap: 14px 22px; }
  .hp-loc-stats { gap: 18px 26px; }
  .hp-cat-grid, .hp-path-grid, .hp-industries-grid, .hp-plan-grid, .hp-included-grid, .hp-ai-grid, .hp-testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-experts-grid, .hp-affiliate-grid, .hp-spotlight-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hp-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-loc-row h3 { flex-basis: 100%; }
  .hp-community-row { flex-direction: column; align-items: flex-start; }
  .hp-steps-grid { grid-template-columns: minmax(0, 1fr); gap: 34px 24px; }
  .hp-scale-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .hp-scale-grid::before { display: none; }
  .hp-strip-row { justify-content: center; text-align: center; }
}
@media (max-width: 575.98px) {
  .hp-cats, .hp-plans, .hp-included, .hp-spotlight, .hp-ai, .hp-paths, .hp-experts, .hp-scale, .hp-locations, .hp-trust, .hp-testimonials, .hp-affiliate, .hp-industries, .hp-community { padding: 44px 0; }
  .hp-cat-grid, .hp-path-grid, .hp-trust-grid, .hp-industries-grid, .hp-affiliate-facts, .hp-plan-grid, .hp-included-grid, .hp-ai-grid, .hp-testi-grid, .hp-scale-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-loc-chip { min-height: 0; }
  .hp-hero-facts { gap: 14px 20px; }
  .hp-actions .hp-btn { width: 100%; }
  .hp-strip-logos { justify-content: center; }
  .hp-strip-facts { justify-content: center; }
}