/* ==========================================================================
   IESMAC public landing — Phoenix-grade marketing styling.
   External file (not subject to the inline <style> UI-standards budget).
   Uses Phoenix CSS vars (--phoenix-*) so it tracks the active brand palette.
   ========================================================================== */

:root {
  --ls-primary: var(--phoenix-primary, #1A8294);
  --ls-info: var(--phoenix-info, #2FBFD4);
  --ls-dark: var(--phoenix-secondary, #31474F);
}

html { scroll-behavior: smooth; }

/* ---- shared bits -------------------------------------------------------- */
.ls-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ls-primary);
  background: var(--phoenix-primary-bg-subtle, #e3f2f4);
  padding: .3rem .7rem; border-radius: 2rem; margin-bottom: 1rem;
}
.ls-text-gradient {
  background: linear-gradient(115deg, var(--ls-primary), var(--ls-info));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ls-section { padding: 5.5rem 0; position: relative; }
.ls-section-tint { background: var(--phoenix-body-tertiary-bg, #f5f7fa); }
.ls-section-head { max-width: 640px; margin: 0 auto 3.25rem; text-align: center; }
.ls-section-head h2 { font-weight: 800; letter-spacing: -.02em; }
.ls-section-head p { color: var(--phoenix-secondary-color, #5e6e82); font-size: 1.05rem; margin: 0; }

/* decorative soft blobs / dotted grid */
.ls-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ls-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.ls-blob-1 { width: 30rem; height: 30rem; top: -10rem; right: -8rem;
  background: radial-gradient(circle, var(--phoenix-primary-bg-subtle, #e3f2f4), transparent 70%); }
.ls-blob-2 { width: 26rem; height: 26rem; bottom: -12rem; left: -10rem;
  background: radial-gradient(circle, rgba(47,191,212,.20), transparent 70%); }
.ls-dotgrid { background-image: radial-gradient(rgba(26,130,148,.10) 1.3px, transparent 1.3px); background-size: 24px 24px; }
.ls-content { position: relative; z-index: 1; }

/* ---- hero --------------------------------------------------------------- */
.ls-hero { position: relative; overflow: hidden; padding: 1.25rem 0 5rem; }
.ls-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
.ls-hero-sub { font-size: 1.12rem; line-height: 1.6; max-width: 33rem; }
.ls-hero-rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600;
  color: var(--phoenix-secondary-color, #5e6e82); }
.ls-avatars { display: inline-flex; }
.ls-avatars img { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #fff; margin-left: -.55rem; box-shadow: 0 .2rem .5rem rgba(0,0,0,.12); }

/* browser frame + CSS mock product UI */
.ls-browser { border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2.5rem 5rem rgba(18,78,90,.22); }
.ls-browser-bar { height: 2.2rem; background: #f1f3f5; display: flex; align-items: center; gap: .4rem; padding: 0 .9rem; }
.ls-browser-bar i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.ls-dot-r { background: #ff5f56; } .ls-dot-y { background: #ffbd2e; } .ls-dot-g { background: #27c93f; }
.ls-mock { display: flex; min-height: 24rem; background: var(--phoenix-body-tertiary-bg, #f5f7fa); }
.ls-mock-side { width: 28%; background: linear-gradient(180deg, var(--ls-primary), #156b7a); padding: .9rem .7rem; }
.ls-mock-side span { display: block; height: .55rem; border-radius: 1rem; background: rgba(255,255,255,.30); margin-bottom: .7rem; }
.ls-mock-side span.on { background: #fff; width: 85%; }
.ls-mock-main { flex: 1; padding: 1rem; }
.ls-mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.ls-mock-tile { background: #fff; border-radius: .6rem; padding: .65rem; box-shadow: 0 .3rem .8rem rgba(18,78,90,.07); }
.ls-mock-tile b { display: block; font-size: 1.1rem; color: var(--ls-dark); }
.ls-mock-tile small { color: var(--ls-primary); font-size: .6rem; font-weight: 700; }
.ls-mock-chart { background: #fff; border-radius: .6rem; padding: 1rem; display: flex; align-items: flex-end; gap: .55rem; height: 12rem;
  box-shadow: 0 .3rem .8rem rgba(18,78,90,.07); }
.ls-mock-chart i { flex: 1; border-radius: .35rem .35rem 0 0; background: linear-gradient(180deg, var(--ls-info), var(--ls-primary)); }

.ls-chip { position: absolute; background: #fff; color: #1f2937; border-radius: .8rem; padding: .55rem .85rem;
  box-shadow: 0 1rem 2.2rem rgba(18,78,90,.18); font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .45rem; }

/* ---- feature / module cards -------------------------------------------- */
.ls-card { border: 1px solid var(--phoenix-border-color, #e3e6ed); border-radius: 1rem; background: #fff; height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ls-card:hover { transform: translateY(-7px); box-shadow: 0 1.6rem 3rem rgba(18,78,90,.13); border-color: transparent; }
.ls-icon { width: 3.2rem; height: 3.2rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; }
.ls-icon-1 { background: linear-gradient(135deg, #1A8294, #2FBFD4); }
.ls-icon-2 { background: linear-gradient(135deg, #2BA5B8, #6fd6e6); }
.ls-icon-3 { background: linear-gradient(135deg, #f5803e, #ffb38a); }
.ls-icon-4 { background: linear-gradient(135deg, #25b865, #6fe0a0); }
.ls-icon-5 { background: linear-gradient(135deg, #6366f1, #a5b4fc); }
.ls-icon-6 { background: linear-gradient(135deg, #31474F, #5e7d8a); }

/* ---- brand strip -------------------------------------------------------- */
.ls-brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap;
  color: var(--phoenix-tertiary-color, #8a94a6); opacity: .7; transition: .2s; }
.ls-brand-name:hover { color: var(--ls-primary); opacity: 1; }
.ls-brand-name i { font-size: 1.2rem; margin-right: .25rem; vertical-align: -2px; }

/* ---- stats -------------------------------------------------------------- */
.ls-stat b { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; line-height: 1; display: block; }
.ls-stat span { color: var(--phoenix-secondary-color, #5e6e82); font-weight: 600; font-size: .95rem; }

/* ---- how-it-works steps ------------------------------------------------- */
.ls-steps { position: relative; }
.ls-step-no { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--ls-primary), var(--ls-info));
  box-shadow: 0 .7rem 1.4rem rgba(26,130,148,.30); position: relative; z-index: 2; }
@media (min-width: 768px) {
  .ls-steps::before { content: ''; position: absolute; top: 1.7rem; left: 16%; right: 16%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--phoenix-border-color, #cfd6e0), transparent); z-index: 1; }
}

/* ---- pricing ------------------------------------------------------------ */
.ls-price { border: 1px solid var(--phoenix-border-color, #e3e6ed); border-radius: 1.1rem; background: #fff; height: 100%; transition: .22s; }
.ls-price:hover { box-shadow: 0 1.4rem 2.8rem rgba(18,78,90,.12); }
.ls-price.popular { border-color: var(--ls-primary); box-shadow: 0 1.8rem 3.4rem rgba(26,130,148,.20);
  transform: scale(1.03); position: relative; }
.ls-price .ls-feat li { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; font-size: .92rem; }
.ls-price .ls-feat i { color: var(--phoenix-success, #25b865); margin-top: .15rem; }

/* ---- testimonials ------------------------------------------------------- */
.ls-quote { border-radius: 1rem; background: #fff; border: 1px solid var(--phoenix-border-color, #e3e6ed); height: 100%; position: relative; transition: .22s; }
.ls-quote:hover { transform: translateY(-6px); box-shadow: 0 1.4rem 2.8rem rgba(18,78,90,.12); }
.ls-quote-mark { font-size: 3.4rem; line-height: 1; color: var(--phoenix-primary-bg-subtle, #cfeaee); font-family: Georgia, serif; }
.ls-quote img { width: 2.8rem; height: 2.8rem; border-radius: 50%; }

/* ---- team --------------------------------------------------------------- */
.ls-team img { display: block; width: 100%; max-width: 11.5rem; aspect-ratio: 1; object-fit: cover; margin: 0 auto;
  border-radius: 1.25rem; box-shadow: 0 .8rem 1.8rem rgba(18,78,90,.12); transition: box-shadow .22s ease; }
.ls-team-card:hover img { box-shadow: 0 1.4rem 2.6rem rgba(18,78,90,.20); }

/* ---- hero header blend -------------------------------------------------- */
.ls-nav { background: transparent !important; }

/* ---- faq ---------------------------------------------------------------- */
.ls-faq .accordion-button { font-weight: 600; }
.ls-faq .accordion-button:not(.collapsed) { background: var(--phoenix-primary-bg-subtle, #e3f2f4); color: var(--ls-primary); box-shadow: none; }
.ls-faq .accordion-item { border-radius: .8rem !important; overflow: hidden; margin-bottom: .75rem; }

/* ---- cta ---------------------------------------------------------------- */
.ls-cta { position: relative; overflow: hidden; border-radius: 1.5rem;
  background: linear-gradient(120deg, var(--ls-primary) 0%, #156b7a 55%, var(--ls-dark) 100%); }
.ls-cta::after { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px); background-size: 24px 24px; opacity: .6; }
.ls-cta > * { position: relative; z-index: 1; }

/* ---- footer ------------------------------------------------------------- */
.ls-foot a { color: var(--phoenix-body-color, #4d5969); text-decoration: none; }
.ls-foot a:hover { color: var(--ls-primary); }
.ls-social { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--phoenix-body-tertiary-bg, #eef1f6); color: var(--phoenix-secondary-color, #5e6e82); transition: .2s; }
.ls-social:hover { background: var(--ls-primary); color: #fff !important; }