/* ============================================================
   HEMLEAD — SHARED STYLESHEET
   ============================================================
   SEO-NOTE: loaded once via header.php and cached by the browser
   across all 5 pages. Contains: design tokens, nav, footer, buttons,
   cards and section utilities shared everywhere. Page-specific
   sections (hero art, pricing table, etc.) live in a small <style>
   block inside each page file so this file stays generic and short.
   ============================================================ */

:root{
  --ink:#14152B;
  --ink-dim:#8A8DA0;
  --ink-soft:#4A4E5E;
  --violet:#6A2CE0;
  --violet-dark:#5B21D6;
  --violet-tint:#EEE6FD;
  --amber:#E8A427;
  --amber-tint:#FDF4E3;
  --teal:#0F9E8E;
  --teal-tint:#E4F7F4;
  --line:#E4E7F5;
  --line-soft:#EFEFF5;
  --surface:#F7F7FC;
  --surface-2:#F3F5FC;
  --white:#FFFFFF;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,p,ul,li{ margin:0; padding:0; list-style:none; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }

/* SEO-NOTE: visible focus ring kept (not removed) for keyboard users —
   accessibility signals also feed into Core Web Vitals / UX ranking factors */
a:focus-visible, button:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; }

/* ---------- layout utilities ---------- */
.hl-section{ padding:clamp(56px,8vw,100px) clamp(18px,5vw,48px); }
.hl-section.alt{ background:var(--surface); }
.hl-container{ max-width:1180px; margin:0 auto; width:100%; }
.hl-eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--violet); margin-bottom:12px;
}
.hl-h2{
  font-size:clamp(24px,3.4vw,38px); font-weight:800; letter-spacing:-0.01em;
  line-height:1.18; margin-bottom:14px; max-width:640px; color:var(--ink);
}
.hl-h2.center{ margin-left:auto; margin-right:auto; text-align:center; }
.hl-lead{ font-size:15px; line-height:1.65; color:var(--ink-dim); max-width:560px; margin-bottom:0; }
.hl-lead.center{ margin-left:auto; margin-right:auto; text-align:center; }
.hl-head{ margin-bottom:40px; }
.hl-head.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* ---------- buttons ---------- */
.hl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:100px; font-weight:700; font-size:13px; letter-spacing:.03em;
  text-transform:uppercase; padding:15px 28px; cursor:pointer; border:none;
  transition:background .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
.hl-btn-sm{ padding:10px 20px; font-size:12px; }
.hl-btn-primary{ background:var(--violet); color:#fff; box-shadow:0 14px 30px -10px rgba(106,44,224,.4); }
.hl-btn-primary:hover{ background:var(--violet-dark); transform:translateY(-1px); }
.hl-btn-outline{ background:#fff; color:var(--ink); border:1.5px solid var(--line); }
.hl-btn-outline:hover{ border-color:var(--violet); color:var(--violet); }

/* ---------- header CTA shimmer ---------- */
/* SEO-NOTE / DESIGN NOTE: this animated sweep is deliberately its own
   class (.hl-cta-shimmer) rather than being added to .hl-btn-primary
   generally — that class is reused all over the site (pricing cards,
   CTA sections, blog posts), and an infinite shimmer on every single
   one of those would be a lot of constant motion on a page. Scoping
   it to just this class means only the header's "Start Free Trial"
   button animates, everywhere else stays as a normal solid button. */
.hl-cta-shimmer{ position:relative; overflow:hidden; z-index:0; }
.hl-cta-shimmer::after{
  content:''; position:absolute; top:0; left:-45%; width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.85), transparent);
  transform:skewX(-18deg); mix-blend-mode:overlay;
  animation:hlCtaSweep 2.8s ease-in-out infinite; pointer-events:none;
}
@keyframes hlCtaSweep{ 0%{ left:-45%; } 45%,100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){
  .hl-cta-shimmer::after{ animation:none; display:none; }
}

/* ---------- cards ---------- */
.hl-card{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; box-shadow:0 20px 50px -32px rgba(30,20,80,.2); }
.hl-check{ width:20px; height:20px; border-radius:50%; background:var(--violet-tint); color:var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hl-check svg{ width:12px; height:12px; }

/* ============================================================
   SCROLL PROGRESS BAR
============================================================ */
/* SEO-NOTE: z-index:60 is deliberately higher than .hl-topbar's 50 —
   this needs to stay visible above the sticky nav, pinned to the
   true top of the viewport, not just the top of the page content.
   transform:scaleX() is used instead of animating width — scaleX is
   GPU-accelerated and doesn't trigger layout recalculation on every
   scroll event the way animating width would, so this stays smooth
   even on longer pages. */
.hl-scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:3px;
  background:var(--violet); transform-origin:left center; transform:scaleX(0);
  z-index:60; pointer-events:none;
  transition:transform .1s linear;
}
@media (prefers-reduced-motion: reduce){
  .hl-scroll-progress{ transition:none; }
}

/* ============================================================
   TOP NAV
============================================================ */
/* SEO-NOTE: "shiny" header — a soft white-to-lilac gradient instead
   of flat white, a stronger glassy blur, and a slow drifting light
   sweep across the bar on a loop. overflow:hidden is safe here even
   with the mobile nav dropdown nested inside — the dropdown grows the
   header's own height in normal document flow, it isn't clipped;
   overflow:hidden only clips the ::after sweep element below, which
   intentionally starts outside the visible bounds. */
/* SEO-NOTE: dark glossy header — same drifting light-sweep technique
   as before, inverted onto a dark navy-violet gradient instead of
   white. Because the background flipped from light to dark, every
   text color inside the header (.hl-logo, .hl-nav-link, .hl-login-
   link, .hl-menu-toggle, .hl-mobile-link below) also had to change —
   they were all set to dark ink text for a light background, which
   would have been unreadable here otherwise. */
/* ============================================================
   TOP UTILITY BAR (social + email + phone)
============================================================ */
/* SEO-NOTE: same technique as .hl-topbar below — dark background,
   subtle drift-shine animation (shares the hlHeaderShine keyframe
   already defined for the header, so both bars move in visual sync
   rather than looking like two unrelated effects stacked on top of
   each other). Deliberately NOT sticky — it scrolls away with the
   page, only the main nav below it stays pinned, which is the
   standard pattern for a secondary contact/social bar like this. */
.hl-utility-bar{
  position:relative; overflow:hidden;
  background: var(--ink);
  border-bottom: 1px solid rgba(139,92,246,.2);
}
.hl-utility-bar::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(139,92,246,.3), transparent);
  transform:skewX(-20deg); pointer-events:none;
  animation: hlHeaderShine 5s ease-in-out infinite; animation-delay:.4s;
}
@media (prefers-reduced-motion: reduce){ .hl-utility-bar::after{ animation:none; display:none; } }

.hl-utility-inner{
  position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.hl-utility-contact{ display:flex; align-items:center; gap:18px; }
.hl-utility-link{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:#B4B6CC; transition:color .15s ease; white-space:nowrap;
}
.hl-utility-link:hover{ color:#fff; }
.hl-utility-link svg{ width:13px; height:13px; flex-shrink:0; }

.hl-utility-social{ display:flex; align-items:center; gap:12px; }
.hl-utility-social a{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; color:#B4B6CC; background:rgba(255,255,255,.06);
  transition:color .15s ease, background .15s ease;
}
.hl-utility-social a:hover{ color:#fff; background:rgba(139,92,246,.35); }
.hl-utility-social svg{ width:13px; height:13px; }

@media (max-width:600px){
  .hl-utility-link.email-link span{ display:none; } /* keep the icon + tappable mailto, drop the visible email text to save space */
}
@media (max-width:480px){
  .hl-utility-bar{ display:none; } /* smallest phones: hide entirely, main nav below still has everything essential */
}

.hl-topbar{
  position:sticky; top:0; z-index:50; overflow:hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, #FBFAFF 45%, #F5F1FE 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(106,44,224,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 18px 40px -30px rgba(106,44,224,.25);
}
.hl-topbar::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.9), transparent);
  transform:skewX(-20deg); pointer-events:none;
  animation: hlHeaderShine 5s ease-in-out infinite;
}
@keyframes hlHeaderShine{ 0%{ left:-60%; } 45%,100%{ left:130%; } }
@media (prefers-reduced-motion: reduce){ .hl-topbar::after{ animation:none; display:none; } }
.hl-topbar-inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:28px; }
.hl-logo{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:var(--ink); flex-shrink:0; }
.hl-logo-img{ height:40px; width:auto; display:block; }
.hl-logo-mark{ width:30px; height:30px; border-radius:9px; background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; box-shadow:0 6px 16px -4px rgba(106,44,224,.6); }
.hl-nav{ display:flex; align-items:center; gap:26px; margin:0 auto; }
.hl-nav-link{ font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:color .15s ease; white-space:nowrap; }
.hl-nav-link:hover, .hl-nav-link.active{ color:var(--violet); }
.hl-topbar-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.hl-login-link{ text-transform:none; }
.hl-menu-toggle{ display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:6px; }

.hl-mobile-nav{ position:relative; z-index:1; display:none; flex-direction:column; padding:8px 24px 20px; border-top:1px solid var(--line-soft); }
.hl-mobile-nav.open{ display:flex; }
.hl-mobile-link{ padding:12px 0; font-weight:600; font-size:14.5px; color:var(--ink-soft); border-bottom:1px solid var(--line-soft); }
.hl-mobile-link.active{ color:var(--violet); }
.hl-mobile-actions{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }

@media (max-width:920px){
  .hl-nav, .hl-topbar-actions{ display:none; }
  .hl-menu-toggle{ display:flex; margin-left:auto; }
}

/* ============================================================
   FOOTER
============================================================ */
.hl-footer{ background:var(--ink); color:#C7C9DA; }
.hl-footer-inner{ max-width:1180px; margin:0 auto; padding:64px 24px 28px; }
.hl-footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
.hl-logo-dark{ color:#fff; margin-bottom:12px; }
.hl-footer-tagline{ font-size:13.5px; line-height:1.6; color:#9698B5; max-width:260px; }
.hl-footer-heading{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:16px; }
.hl-footer-col{ display:flex; flex-direction:column; gap:11px; }
.hl-footer-col a, .hl-footer-static{ font-size:13.5px; color:#B4B6CC; transition:color .15s ease; }
.hl-footer-col a:hover{ color:#fff; }
.hl-footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:22px; font-size:12.5px; color:#82849E; }
.hl-footer-legal{ display:flex; gap:18px; }
.hl-footer-legal a:hover{ color:#fff; }

@media (max-width:800px){
  .hl-footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .hl-footer-top{ grid-template-columns:1fr; }
}