/* =====================================================================
   ZelpMan — brand polish layer (2026-05-29)
   Loads AFTER css/styles.css to re-skin the StartBootstrap theme into the
   ZelpMan brand: purple #6C2CF0, premium shadows, smooth motion, and a
   mobile background-image hook. Self-contained (no external image deps).
   Deploy this file to:  <site root>/css/zelpman-brand.css
   ===================================================================== */

:root{
  --zm-primary:#6C2CF0;
  --zm-primary-dark:#5a1fd6;
  --zm-primary-2:#8B5CF6;
  --zm-accent:#A855F7;
  --zm-ink:#1e1b2e;
  --zm-muted:#6b7280;
  --zm-ring:rgba(108,44,240,.16);
  --zm-shadow:0 18px 40px rgba(108,44,240,.14);
  --zm-shadow-lg:0 26px 60px rgba(108,44,240,.22);
  --zm-radius:1rem;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ---------- Brand gradient helpers ---------- */
.text-gradient{
  background:linear-gradient(120deg,var(--zm-primary),var(--zm-accent))!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.bg-gradient-primary-to-secondary{
  background:linear-gradient(120deg,var(--zm-primary),var(--zm-accent))!important;
}
/* Device-mockup SVG circle + theme gradient stops */
.gradient-start-color{ stop-color:var(--zm-primary)!important; }
.gradient-end-color{ stop-color:var(--zm-accent)!important; }
.icon-feature{ color:var(--zm-primary)!important; }

/* ---------- Navbar (glass) ---------- */
#mainNav{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(108,44,240,.08);
  box-shadow:0 6px 24px rgba(108,44,240,.06)!important;
  transition:background .25s ease, box-shadow .25s ease;
}
#mainNav .nav-link{ font-weight:600; color:#3b3550!important; position:relative; transition:color .2s ease; }
#mainNav .nav-link:hover,#mainNav .nav-link.active{ color:var(--zm-primary)!important; }
#mainNav .nav-link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:2px; height:2px;
  background:var(--zm-primary); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
#mainNav .nav-link:hover::after,#mainNav .nav-link.active::after{ transform:scaleX(1); }
.navbar-toggler{ border-color:rgba(108,44,240,.3)!important; color:var(--zm-primary)!important; }

/* ---------- Buttons ---------- */
.btn-primary{
  --bs-btn-bg:var(--zm-primary); --bs-btn-border-color:var(--zm-primary);
  --bs-btn-hover-bg:var(--zm-primary-dark); --bs-btn-hover-border-color:var(--zm-primary-dark);
  --bs-btn-active-bg:var(--zm-primary-dark); --bs-btn-active-border-color:var(--zm-primary-dark);
  background-image:linear-gradient(120deg,var(--zm-primary),var(--zm-primary-2))!important;
  border:none!important; box-shadow:0 10px 24px rgba(108,44,240,.30); font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(108,44,240,.40); filter:saturate(1.05); }
.btn-outline-light{ font-weight:600; transition:transform .18s ease, box-shadow .18s ease; }
.btn-outline-light:hover{ transform:translateY(-2px); }
.text-primary{ color:var(--zm-primary)!important; }
a{ color:var(--zm-primary); }
a:hover{ color:var(--zm-primary-dark); }

/* ---------- Masthead / hero ---------- */
.masthead{
  position:relative;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(108,44,240,.14), transparent 60%),
    radial-gradient(50rem 40rem at -10% 110%, rgba(168,85,247,.12), transparent 60%),
    #ffffff;
  overflow:hidden;
}
.masthead h1{ letter-spacing:-.5px; }

/* Mobile background image hook ------------------------------------------------
   Drop your image at:  assets/img/hero-bg.jpg  (portrait works best on phones).
   It shows ONLY on phones, behind a soft purple gradient so text stays readable.
   If the file is absent, the gradient alone still looks clean. */
@media (max-width:767.98px){
  .masthead{
    background:
      linear-gradient(180deg, rgba(108,44,240,.86), rgba(90,31,214,.92)),
      url("assets/img/hero-bg.jpg") center/cover no-repeat fixed;
    color:#fff;
  }
  .masthead h1,.masthead .lead,.masthead p{ color:#fff!important; }
  .masthead .text-muted{ color:rgba(255,255,255,.85)!important; }
}

/* ---------- Testimonial / CTA bands ---------- */
aside.bg-gradient-primary-to-secondary, #download.bg-gradient-primary-to-secondary{
  background:linear-gradient(120deg,var(--zm-primary),var(--zm-accent))!important;
}
.cta{
  background:linear-gradient(120deg,var(--zm-primary),var(--zm-accent))!important;
  position:relative;
}
.cta::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(40rem 20rem at 80% 0%, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}

/* ---------- Cards (generic premium) ---------- */
.card{ border-radius:var(--zm-radius); }
.shadow-sm{ box-shadow:var(--zm-shadow)!important; }

/* Per-page accent cards: recolor the template's blue accents to brand purple */
.terms-card:hover,.policy-card:hover,.contact-card:hover,.contact-form-card:hover{
  border-color:rgba(108,44,240,.6)!important;
  box-shadow:var(--zm-shadow-lg)!important;
}
.terms-section-title i,.policy-section-title i{ color:var(--zm-primary)!important; }
.contact-form-card .form-control:focus,.contact-form-card textarea:focus{
  border-color:var(--zm-primary)!important;
  box-shadow:0 0 0 .2rem var(--zm-ring)!important;
}

/* Services category cards */
.category-card{ border-radius:var(--zm-radius)!important; box-shadow:var(--zm-shadow)!important; }
.category-card:hover{ border-color:rgba(108,44,240,.7)!important; box-shadow:var(--zm-shadow-lg)!important; background:#faf8ff!important; }
.category-icon{ background:rgba(108,44,240,.10)!important; color:var(--zm-primary)!important; }
.chip{ background:rgba(108,44,240,.10)!important; color:var(--zm-primary)!important; border-color:rgba(108,44,240,.35)!important; }

/* Hero gradient overlays used on terms/privacy/contact: tint to brand */
.terms-hero::before{ background:
  radial-gradient(circle at top right, rgba(108,44,240,.18), transparent 60%),
  radial-gradient(circle at bottom left, rgba(168,85,247,.16), transparent 60%)!important; }
.policy-hero::before{ background:
  radial-gradient(circle at top left, rgba(108,44,240,.18), transparent 60%),
  radial-gradient(circle at bottom right, rgba(168,85,247,.16), transparent 60%)!important; }
.contact-hero::before{ background:
  radial-gradient(circle at top right, rgba(108,44,240,.16), transparent 60%),
  radial-gradient(circle at bottom left, rgba(168,85,247,.14), transparent 60%)!important; }
.services-hero{ background:
  radial-gradient(circle at top left, rgba(108,44,240,.14), transparent 60%),
  radial-gradient(circle at bottom right, rgba(168,85,247,.10), transparent 55%),
  #faf9ff!important; }

/* ---------- Self-contained brand illustration panel ----------
   Replaces the old broken Unsplash hero images. */
.zm-illus{
  border-radius:1.5rem; min-height:260px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--zm-primary),var(--zm-accent));
  box-shadow:var(--zm-shadow-lg); position:relative; overflow:hidden;
}
.zm-illus::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(18rem 12rem at 20% 15%, rgba(255,255,255,.22), transparent 60%);
}
.zm-illus i{ font-size:5.5rem; color:#fff; opacity:.95; position:relative; z-index:1; filter:drop-shadow(0 8px 16px rgba(0,0,0,.18)); }

/* ---------- Footer ---------- */
footer a{ color:rgba(255,255,255,.7)!important; transition:color .2s ease; }
footer a:hover{ color:#fff!important; }

/* ---------- Motion: respect reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}