@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
/* ============================================================
   WebJi® Hosting — Homepage Stylesheet
   Theme: Kadence-based palette (Purple #41295a / Orange #f15d0e)
   Typography: Figtree (body/headings), Prompt (nav)
   No gradients — flat solid color blocks
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand palette (extracted from live Kadence theme) */
  --c-purple:        #41295a;   /* primary brand    */
  --c-purple-light:  #694391;   /* hover / accent   */
  --c-purple-deep:   #2f1d42;   /* darker shade     */
  --c-orange:        #f15d0e;   /* CTA accent       */
  --c-orange-hover:  #d44e05;
  --c-orange-text:   #c24704;
  --c-ink:           #1A202C;   /* body text dark   */
  --c-text:          #444444;   /* body text        */
  --c-text-muted:    #718096;   /* secondary text   */
  --c-bg:            #fcfcfc;   /* page background  */
  --c-bg-alt:        #efeff5;   /* light section bg */
  --c-bg-soft:       #f7daf0;   /* soft tint block  */
  --c-border:        #deddeb;   /* borders          */
  --c-border-light:  #eeeeee;
  --c-white:         #ffffff;

  /* Typography */
  --ff-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-heading: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-nav:     'Prompt', var(--ff-body);

  /* Layout */
  --container:   1170px;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow-sm:   0 1px 3px rgba(26,32,44,.08);
  --shadow:      0 4px 16px rgba(26,32,44,.07);
  --shadow-lg:   0 10px 30px rgba(26,32,44,.09);
  --header-h:    72px;

  --transition:  .25s ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-purple); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-purple-light); }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--ff-heading);
  color: var(--c-ink);
  font-weight: 700;
  line-height: 1.25;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.4rem); }

/* ---------- Layout Helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 64px 0; }
.section--alt { background: var(--c-bg-alt); }
.section--purple { background: var(--c-purple); color: #e0d6ea; }
.section--purple h2,
.section--purple h3 { color: var(--c-white); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--ff-nav);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 12px;
}
.section-head p {
  color: var(--c-text-muted);
  font-size: 1.05rem;
  margin-top: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-nav);
  font-weight: 700;
  font-size: .95rem;
  padding: 13px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  line-height: 1;
}
.btn--primary {
  background: var(--c-orange);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-orange-hover);
  color: var(--c-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,.5);
}
.btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-purple);
  border-color: var(--c-white);
}
.btn--purple {
  background: var(--c-purple);
  color: var(--c-white);
}
.btn--purple:hover {
  background: var(--c-purple-light);
  color: var(--c-white);
  transform: translateY(-2px);
}
.btn--outline {
  background: transparent;
  color: var(--c-purple);
  border-color: var(--c-purple);
}
.btn--outline:hover {
  background: var(--c-purple);
  color: var(--c-white);
}

/* ---------- Notification Bar ---------- */
.notice-bar {
  background: var(--c-purple-deep);
  color: #c9bdd6;
  font-size: .82rem;
  text-align: center;
  padding: 8px 20px;
  font-weight: 500;
}
.notice-bar a { color: #fff; text-decoration: underline; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--c-border-light);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}
.logo img { height: 50px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  font-family: var(--ff-nav);
  font-size: .84rem;
  font-weight: 500;
  color: var(--c-ink);
  padding: 8px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover,
.nav-item:hover > .nav-link {
  color: var(--c-purple);
  background: var(--c-bg-alt);
}
.nav-link .chev { font-size: .65rem; transition: transform var(--transition); }
.nav-item:hover > .nav-link .chev { transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
}
.nav-item:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: 8px 14px;
  font-size: .9rem;
  color: var(--c-text);
  border-radius: 6px;
  font-weight: 500;
}
.dropdown a:hover { background: var(--c-bg-alt); color: var(--c-purple); }

/* Mega Dropdown (multi-column for Hosting) */
.dropdown--mega {
  min-width: 520px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}
.dropdown--mega::before {
  content: attr(data-title);
  grid-column: 1 / -1;
  font-family: var(--ff-nav);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border-light);
}
.dropdown--mega .mega-col-head {
  grid-column: 1 / -1;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 8px;
  padding: 0 14px 4px;
}
.dropdown--mega a {
  padding: 7px 14px;
  font-size: .88rem;
}

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-phone {
  font-family: var(--ff-nav);
  font-weight: 700;
  color: var(--c-purple);
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--c-purple);
  cursor: pointer;
}

/* ---------- Hero ----------
   Original WebJi design: full-bleed team photo as the hero background,
   with a semi-transparent purple overlay. Text content sits on top of
   the tinted image. No side panel / card. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--c-white);
  /* Full-bleed team photo */
  background-image: url('../img/hero-team.jpeg');
  background-size: cover;
  background-position: 10% 54%;
  background-repeat: no-repeat;
  background-color: var(--c-purple);
  min-height: 560px;
}
/* Purple overlay tint over the photo (same as original: rgba(65,41,90,.65)) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(65, 41, 90, 0.65);
  pointer-events: none;
  z-index: 1;
}
/* Subtle wave texture on top of the overlay */
.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/waves.png');
  background-size: auto;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  opacity: .06;
}
/* White wave curve at bottom transitioning to page */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 70px;
  background: var(--c-bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 0);
  z-index: 3;
}
.hero-grid {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 50px 20px 85px;
}
.hero-content {
  max-width: 640px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  color: #e8def0;
  font-family: var(--ff-nav);
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.hero h1 { color: var(--c-white); margin-bottom: 16px; line-height: 1.12; }
.hero h1 .hl { color: var(--c-orange); }
.hero-sub {
  font-size: 1.1rem;
  color: #ddd2e6;
  margin-bottom: 14px;
  max-width: 540px;
}
.hero-trust {
  display: flex;
  gap: 22px;
  margin: 20px 0 24px;
  flex-wrap: wrap;
}
.hero-trust .trust-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #d4c8df; }
.hero-trust .tick {
  width: 22px; height: 22px;
  background: var(--c-orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #fff; font-weight: 700;
}
.hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Trust Bar / Stats ---------- */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  padding: 48px 0;
}
.stat .num {
  font-family: var(--ff-nav);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-purple);
  line-height: 1;
}
.stat .lbl { font-size: .9rem; color: var(--c-text-muted); margin-top: 6px; }

/* ---------- Hosting Types Cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hosting-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  transition: all var(--transition);
  text-align: center;
}
.hosting-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--c-purple-light);
}
.hosting-card .icon {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  background: var(--c-bg-alt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hosting-card .icon svg { width: 30px; height: 30px; color: var(--c-purple); }
.hosting-card h3 { margin-bottom: 8px; font-size: 1.15rem; }
.hosting-card p { font-size: .92rem; color: var(--c-text-muted); margin-bottom: 16px; }
.hosting-card .price {
  font-family: var(--ff-nav);
  font-weight: 700;
  color: var(--c-purple);
  font-size: 1.3rem;
}
.hosting-card .price small { font-size: .75rem; color: var(--c-text-muted); font-weight: 400; }
.hosting-card .link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--ff-nav);
  font-weight: 700;
  font-size: .88rem;
  color: var(--c-orange);
}
.hosting-card .link:hover { color: var(--c-orange-hover); }

/* ---------- Service Hub Sections ---------- */
.hub-section { padding: 56px 0; }
.hub-section:nth-child(even) { background: var(--c-bg-alt); }

.hub-block { margin-bottom: 48px; }
.hub-block:last-child { margin-bottom: 0; }
.hub-block-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.hub-block-head .h-icon {
  width: 48px; height: 48px;
  background: var(--c-purple);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-block-head .h-icon svg { width: 24px; height: 24px; color: var(--c-white); }
.hub-block-head h2 { font-size: 1.5rem; }
.hub-block-head p { font-size: .92rem; color: var(--c-text-muted); }

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-ink);
  transition: all var(--transition);
}
.service-link:hover {
  border-color: var(--c-orange);
  color: var(--c-purple);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
.service-link .arrow { color: var(--c-orange); font-weight: 700; font-size: 1.1rem; }
.hub-section:nth-child(even) .service-link { background: var(--c-bg); }

/* ---------- Why Choose ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.why-card {
  text-align: center;
  padding: 30px 24px;
}
.why-card .icon {
  width: 70px; height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--c-purple);
  display: flex; align-items: center; justify-content: center;
}
.why-card .icon svg { width: 32px; height: 32px; color: var(--c-white); }
.why-card h3 { margin-bottom: 10px; }
.why-card p { font-size: .92rem; color: rgba(255,255,255,.8); }
.section--purple .why-card p { color: rgba(255,255,255,.75); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  background: var(--c-white);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background var(--transition);
}
.faq-q:hover { background: var(--c-bg-alt); }
.faq-q .pm {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 400;
  color: var(--c-purple);
  transition: transform var(--transition);
}
.faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--c-orange); color: #fff; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 24px;
}
.faq-item.open .faq-a { padding: 0 24px 20px; max-height: 500px; }
.faq-a p { color: var(--c-text); font-size: .95rem; }

/* ---------- CTA Band ---------- */
.cta-band {
  background: var(--c-purple);
  color: var(--c-white);
  text-align: center;
  padding: 64px 0;
}
.cta-band h2 { color: var(--c-white); margin-bottom: 14px; }
.cta-band p { color: #d1c5dc; max-width: 600px; margin: 0 auto 28px; font-size: 1.05rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-purple-deep);
  color: #b5a8c4;
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin-bottom: 44px;
}
.footer-brand { grid-column: span 2; max-width: 460px; }
.footer-brand img {
  height: 42px;
  width: auto;
  margin-bottom: 18px;
  background: var(--c-white);
  padding: 4px 8px;
  border-radius: 6px;
}
.footer-brand p { font-size: .9rem; line-height: 1.7; margin-bottom: 18px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--c-orange); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
  color: var(--c-white);
  font-size: 1rem;
  margin-bottom: 18px;
  font-family: var(--ff-nav);
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  color: #b5a8c4;
  font-size: .88rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--c-orange); }
.footer-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .88rem;
}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--c-orange); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .83rem;
}
.footer-bottom a { color: #b5a8c4; }
.footer-bottom a:hover { color: var(--c-orange); }

/* ---------- Mobile Menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--c-white);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  padding: 20px;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none; border: none;
  font-size: 1.8rem; color: var(--c-purple);
  cursor: pointer;
}
.mobile-menu .m-nav { margin-top: 50px; }
.mobile-menu .m-nav > li { border-bottom: 1px solid var(--c-border-light); }
.mobile-menu .m-nav > li > a,
.mobile-menu .m-nav > li > button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-family: var(--ff-nav);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-ink);
  background: none; border: none; cursor: pointer;
}
.mobile-menu .m-sub { padding: 0 0 14px; }
.mobile-menu .m-sub a {
  display: block;
  padding: 8px 16px;
  font-size: .9rem;
  color: var(--c-text);
}

/* ---------- Responsive ---------- */
@media (max-width: 1360px){
  .header-phone{display:none}
  .nav-link{padding:10px 6px;font-size:.88rem}
}
@media (max-width: 1170px){
  .main-nav{display:none}
  .mobile-toggle{display:block}
}
@media (max-width: 1024px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 860px) {
  .main-nav, .header-cta .btn { display: none; }
  .mobile-toggle { display: block; }
  .footer-brand { grid-column: auto; max-width: none; }
  .hero-grid { padding: 50px 20px 70px; }
  .hero-content { max-width: 100%; }
  .hero { background-position: 20% center; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .why-grid { grid-template-columns: 1fr; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 48px 0; }
}
@media (max-width: 560px) {
  .cards-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* visual-audit additions */
.footer-brand img{background:#fff;padding:8px 10px;border-radius:10px}
.hosting-card .link{color:var(--c-orange-text)}
.hosting-card .price{margin-top:auto}
.hosting-card{display:flex;flex-direction:column}
.hosting-card .link{margin-top:auto}
.hero h1{line-height:1.18}
.dropdown.multi{columns:2;column-gap:6px;min-width:340px}
@media (max-width:640px){ .cta-band{padding:44px 0} }


/* ============================================================
   REDESIGN LAYER (2026-10-31) — Hostc-inspired typography, pills,
   soft boxes, pill buttons. Palette unchanged. Later rules win.
   ============================================================ */

:root {
  --ff-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-nav:     'Outfit', var(--ff-body);
  --c-text:     #47536B;
  --radius:     14px;
  --radius-lg:  20px;
  --c-tint:     #F6F3FA;           /* soft purple tint card bg */
  --c-tint-border: #E5E1EE;
}

/* --- Typography scale (semibold, tighter) --- */
body { font-size: 16.5px; }
h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }
h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.75rem); line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.5rem); letter-spacing: -0.01em; }
p  { line-height: 1.72; }

/* --- Eyebrow -> tinted pill --- */
.section-head .eyebrow {
  font-family: var(--ff-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-purple);
  background: rgba(65,41,90,.08);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 16px;
}

/* --- Buttons -> pill --- */
.btn, .btn--sm {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--ff-body);
  padding: 14px 30px;
  letter-spacing: .01em;
}
.btn--sm { padding: 9px 22px; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(241,93,14,.28); }
.btn--ghost { border-width: 1.5px; }

/* --- Header/nav --- */
.nav-link, .header-cta .btn { font-weight: 500; }
.header-phone { font-weight: 600; }

/* --- Section rhythm --- */
.section, .hub-section { padding: 96px 0; }
.section-head { margin-bottom: 56px; }
.section-head p { font-size: 1.1rem; }

/* --- Cards: rounder, softer, purple hover --- */
.rel-card, .feat, .aside-card, .faq-item, .hub-card, .stat-card {
  border-radius: var(--radius-lg);
  border-color: var(--c-tint-border);
}
.rel-card:hover, .feat:hover { border-color: #B9A8D6; transform: translateY(-4px); }
.hub-card, .stat-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.hub-card:hover, .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* --- Hero (homepage) --- */
.hero { padding: 110px 0 120px; }
.hero p { color: rgba(255,255,255,.86); font-size: 1.1rem; }
.hero-badges span { font-weight: 600; }
.hero-cta-group .btn { padding: 15px 34px; }

/* --- CTA band stays flat purple; round the inner copy spacing --- */
.cta-band { padding: 84px 0; }
.cta-band h2 { letter-spacing: -0.02em; }

/* --- Footer headings --- */
.site-footer h4 { font-weight: 600; letter-spacing: 0; text-transform: none; }


/* --- Final micro-polish (2026-10-31) --- */
::selection { background: var(--c-orange); color: #fff; }
.section--alt { background: #F6F5FA; }
.rel-go { transition: transform var(--transition); }
.rel-card:hover .rel-go, .hub-card:hover .rel-go { transform: translateX(4px); }
.site-footer { background: var(--c-purple-deep, #2f1d42); }
.site-footer a:hover { color: var(--c-orange); }
.crumbs { font-weight: 500; }


/* ===== MERGED MICRO-DESIGN QA FIXES (slice A + B, 2026-10-31) ===== */
/* ============================================================
   polish_A.css — Slice A micro-design fixes (visual QA 2026-10-31)
   Scope: homepage + 9 hubs + legal/trust/utility pages.
   Layered AFTER style.css + pages.css. Palette/fonts/content untouched.
   ============================================================ */

/* Homepage + prose pages: bare <h2>/<h3> (outside .prose/.h2) inherit the
   reset's margin:0 and sit dead against the paragraph/list above them
   (seen on homepage "How to choose web hosting in India" section:
   "Web space price in India" touched the <p> above with 0px gap).
   Give any bare heading that follows content the same breathing room the
   .prose rhythm uses. Sibling combinator keeps first-child headings
   (section heads, card titles, cta-band) untouched; .prose/.h2 class rules
   out-rank these so prose spacing is unchanged. */
p + h2, ul + h2, ol + h2, table + h2, blockquote + h2, figure + h2,
.tbl-wrap + h2, .answer-box + h2, h2 + h2, h3 + h2,
p + h3, ul + h3, ol + h3, table + h3, blockquote + h3, figure + h3,
.tbl-wrap + h3, .answer-box + h3, h3 + h3 { margin-top: 40px; }

/* Interior pages: .page-body is also a .container, and its vertical padding
   declaration ("padding: 52px 0 10px" in the redesign layer) wipes the
   container's 20px side gutters — on mobile (390px) prose, lists and cards
   touched the viewport edge, and on desktop the body column sat 20px left of
   the hero headline (hero 155px vs prose 135px). Restore the standard gutters
   so hero, prose and aside columns line up. */
.container.page-body { padding-left: 20px; padding-right: 20px; }

/* Hub FAQ pages (full-width prose, e.g. /hosting-faq/): .faq-list keeps its
   homepage-era "max-width:840px; margin:0 auto", which centers the accordion
   column while the section h2 above it is left-aligned. Pin the column to the
   heading edge. On 760px prose pages 840px never engages, so no change there;
   the homepage's centered FAQ section sits outside .prose and is untouched. */
.prose .faq-list { margin-left: 0; }

/* Mobile pricing tables: most plan tables (5 columns) cannot fit a 390px
   viewport and scroll inside .tbl-wrap by design, but default padding pushed
   the Order button up to ~240px past the edge (half-clipped with no hint).
   Tighter cells at phone widths cut that overflow roughly in half. */
@media (max-width: 480px) {
  table.tbl td, table.tbl th { padding: 8px 9px; }
  .td-order .btn--sm { padding: 8px 13px; font-size: 13px; }
}


/* ============================================================
   polish_B.css — Slice B micro-design fixes (2026-10-31)
   Slice B: service / product / hosting / TLD / tool pages
   (shared interior templates). Every rule below was tested live
   via injected <style> at 1440x900 and 390x844 before persisting.
   No palette, font, content-text, price or meta changes.
   ============================================================ */

/* footer, all interior templates: the redesign layer paints a white
   pill behind .footer-brand img, but assets/img/webji-logo-white.png
   is white art on transparency with a solid-white text box — the net
   render is a blank white pill on every page. Swap to the standard
   boxed logo so the brand mark is visible on the deep-purple footer. */
html .footer-brand img{content:url(/assets/img/webji-logo.png);background:transparent;padding:0;border-radius:0;height:46px;width:auto}

/* footer, desktop 4-col grid: brand (span 2) + 5 link columns leave
   one empty cell in the second row. Let the widest column (Contact)
   span the remaining cells so the grid closes with no hole. */
@media (min-width:1025px){
  html .footer-grid .footer-col:last-child{grid-column:3 / span 2}
}

/* pricing tables, service pages: Order/quote buttons sat ~8px above
   their cell centre (td vertical-align:top). Centre the button in its
   cell; header order cell is untouched. */
table.tbl td.td-order{vertical-align:middle}

/* mobile 390px: table Order buttons (.btn--sm) were 34px tall — nudge
   padding so the primary tap target reaches ~38-40px inside the same
   row height. */
@media (max-width:640px){
  table.tbl td.td-order .btn--sm{padding:11px 18px}
}