/* Nav/footer */
.nav-row {display:flex;align-items:center;justify-content:space-between;height:68px;}
.nav-brand {display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-0.02em;}
.nav-brand img {width:44px;height:44px;border-radius:10px;}
.nav-links {display:flex;align-items:center;gap:clamp(18px,2.5vw,32px);}
.nav-link {font-family:var(--sans);font-size:14px;color:var(--ink-soft);text-decoration:none;padding:6px 0;position:relative;transition:color .3s;}
.nav-link:hover {color:var(--ink);}
.nav-link[data-active="true"] {color:var(--ink);}
.nav-link[data-active="true"]::after {content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--plum);border-radius:2px;}
.footer {padding-block:clamp(56px,7vw,100px);background:white;border-top:1px solid var(--line);}
.footer-grid {
  align-items: start;display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);}
@media (min-width:800px) {.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}}
.footer-brand { margin-top: 0; }
.footer-brand .display {
  margin-top: 0;font-size:30px;}
.footer-brand p {margin-top:14px;max-width:320px;color:var(--ink-soft);font-size:15px;line-height:1.55;}
.footer-col h4 {font-family:var(--sans);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin:0 0 14px;}
.footer-col ul {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a {color:var(--ink-soft);text-decoration:none;font-size:15px;transition:color .3s;}
.footer-col a:hover {color:var(--plum);}
.footer-base {margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-muted);letter-spacing:0.06em;}
.footer-base a {color:var(--ink-muted);text-decoration:none;}
.footer-base a:hover {color:var(--ink);}
.shead {max-width:720px;}
.shead h2 {margin:14px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(40px,5.6vw,80px);line-height:0.96;letter-spacing:-0.035em;color:var(--ink);}
.shead h2 em {font-family:var(--serif);font-style:italic;font-weight:400;color:var(--plum);}
.shead p {margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:560px;}

/* Page hero — dark plum, professional */
.lares-hero {
  position: relative;
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
  background: var(--plum-ink);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.lares-hero::before {
  content: "";
  position: absolute;
  top: -100px; right: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(closest-side, var(--plum-deep), transparent 65%);
  filter: blur(60px);
  opacity: 0.7;
  z-index: -1;
}
.lares-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.lares-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: white;
  margin: 24px 0 0;
}
.lares-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--plum-soft);
}
.lares-hero .eyebrow { color: var(--plum-soft); }
.lares-hero p.lead {
  margin: 32px 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-width: 520px;
}
.lares-hero .ctas {
  margin: 32px 0 0;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.lares-hero .btn-primary {
  background: white;
  color: var(--plum-ink);
}
.lares-hero .btn-primary:hover {
  background: var(--plum-soft);
  color: white;
}
.lares-hero .btn-ghost {
  border-color: rgba(255,255,255,.2);
  color: white;
}
.lares-hero .btn-ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.4);
  color: white;
}
.lares-quickstats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  max-width: 560px;
}
.lares-quickstats > div {
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 16px;
}
.lares-quickstats .v {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--plum-soft);
}
.lares-quickstats .l {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 6px;
}

/* Dashboard preview big */
.dashboard-preview {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.6);
}
.dp-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.dp-bar .traffic { display: flex; gap: 6px; }
.dp-bar .traffic span { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); }
.dp-bar .url {
  flex: 1;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,.5);
  padding: 6px 14px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.dp-body {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  font-size: 11px;
}
.dp-side {
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dp-side .label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding: 4px 8px;
  margin-top: 8px;
}
.dp-side .label:first-child { margin-top: 0; }
.dp-side .item {
  padding: 7px 10px;
  border-radius: 7px;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .3s;
}
.dp-side .item:hover { color: white; background: rgba(255,255,255,.04); }
.dp-side .item.active {
  background: var(--plum);
  color: white;
}
.dp-main {
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 14px;
}
.dp-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.dp-kpi {
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 10px;
}
.dp-kpi .lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.dp-kpi .val {
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.dp-kpi.plum .val { color: var(--plum-soft); }
.dp-chart {
  height: 70px;
  background: linear-gradient(180deg, rgba(178,146,206,.15), transparent);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.dp-chart svg { width: 100%; height: 100%; }
.dp-table {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dp-row {
  display: grid;
  grid-template-columns: 24px 1fr 60px 50px 16px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  font-size: 11px;
  transition: background .3s;
}
.dp-row:hover { background: rgba(178,146,206,.08); }
.dp-row .av {
  width: 22px; height: 22px;
  border-radius: 999px;
  background-size: cover; background-position: center;
}
.dp-row .room { font-family: var(--mono); color: rgba(255,255,255,.5); font-size: 10px; }
.dp-row .age { color: rgba(255,255,255,.5); font-size: 10px; }
.dp-row .st { width: 6px; height: 6px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.dp-row .st.amber { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.15); }

/* Mobile — stop hero stats & dashboard mockup from blowing out width */
@media (max-width: 640px) {
  .lares-quickstats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .lares-quickstats .v { font-size: 26px; }
  .lares-quickstats .l { font-size: 10px; letter-spacing: 0.08em; }

  .dp-body { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-row { grid-template-columns: 20px minmax(0, 1fr) 42px 34px 14px; gap: 6px; }
}

/* Modules grid */
.modules {
  padding-block: clamp(80px, 10vw, 140px);
}
.modules-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) { .modules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .modules-grid { grid-template-columns: 1fr 1fr 1fr; } }
.module {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  transition: all .5s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.module:hover {
  transform: translateY(-4px);
  border-color: var(--plum-soft);
  box-shadow: var(--shadow-md);
}
.module .mod-icon {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--plum-wash);
  border: 1px solid var(--plum-mist);
  color: var(--plum);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .4s var(--ease-out);
}
.module:hover .mod-icon {
  background: white;
  border-color: var(--plum-soft);
  color: var(--plum-deep);
  transform: scale(1.05);
}
.module h3 {
  margin: 20px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.module p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.module .tags {
  margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.module .tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--plum-wash);
  color: var(--plum-deep);
  letter-spacing: 0.04em;
}

/* Implementation timeline */
.timeline {
  padding-block: clamp(80px, 10vw, 140px);
  background: var(--plum-wash);
  position: relative;
  overflow: hidden;
}
.timeline::before {
  content: "";
  position: absolute;
  top: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(closest-side, var(--plum-haze), transparent 65%);
  filter: blur(40px);
  opacity: 0.6;
}
.timeline-rail {
  margin-top: clamp(40px, 5vw, 64px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 800px) {
  .timeline-rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .timeline-rail::before {
    content: "";
    position: absolute;
    top: 36px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--plum-mist) 20%, var(--plum-mist) 80%, transparent);
  }
}
.tl-step {
  position: relative;
  z-index: 1;
}
.tl-step .dot {
  display: block;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--plum-soft);
  position: relative;
}
.tl-step h4 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.tl-step .when {
  margin-top: 4px;
  font-size: 12px;
  color: var(--plum-deep);
  letter-spacing: 0.06em;
  font-weight: 500;
}
.tl-step p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ROI section */
.roi {
  padding-block: clamp(80px, 10vw, 140px);
}
.roi-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) { .roi-grid { grid-template-columns: 1fr 1fr 1fr; } }
.roi-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 28px;
  transition: all .5s var(--ease-out);
}
.roi-card:hover {
  transform: translateY(-4px);
  border-color: var(--plum-soft);
  box-shadow: var(--shadow-md);
}
.roi-card.dark {
  background: var(--plum-ink);
  color: white;
  border-color: transparent;
}
.roi-card.dark .roi-value { color: var(--plum-soft); }
.roi-card.dark .roi-label { color: rgba(255,255,255,.7); }
.roi-card.dark .roi-desc { color: rgba(255,255,255,.55); }
.roi-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--plum);
  display: block;
}
.roi-label {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.roi-desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Demo CTA */
.demo {
  padding-block: clamp(80px, 10vw, 140px);
  background: var(--plum-void);
  color: white;
  position: relative;
  overflow: hidden;
}
.demo::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(closest-side, var(--plum-deep), transparent 65%);
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.demo-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) { .demo-inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
.demo h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: white;
  margin: 12px 0 0;
}
.demo h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--plum-soft);
}
.demo .eyebrow { color: var(--plum-soft); }
.demo p {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  max-width: 480px;
}
.demo-includes {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.demo-includes li {
  display: flex; gap: 12px; align-items: center;
  font-size: 15px; color: rgba(255,255,255,.85);
}
.demo-includes .check {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--plum-soft), var(--plum));
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  flex-shrink: 0;
}
.demo-form {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
}
.demo-form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.demo-form .row.two { grid-template-columns: 1fr 1fr; }
.demo-form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.demo-form label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-soft);
  font-weight: 500;
}
.demo-form input, .demo-form select, .demo-form textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px 16px;
  color: white;
  font-family: var(--sans);
  font-size: 15px;
  transition: all .3s;
}
.demo-form input::placeholder, .demo-form textarea::placeholder { color: rgba(255,255,255,.3); }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus {
  outline: none;
  border-color: var(--plum-soft);
  background: rgba(255,255,255,.06);
}
.demo-form select option { background: var(--plum-void); color: white; }
.demo-form button {
  margin-top: 8px;
  width: 100%;
  background: linear-gradient(180deg, var(--plum-soft), var(--plum));
  color: white;
  border: none;
  padding: 16px;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all .35s var(--ease-out);
  box-shadow: 0 14px 36px -10px rgba(107,77,138,.6);
}
.demo-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 50px -10px rgba(107,77,138,.85);
}
.demo-form .hint {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-align: center;
  letter-spacing: 0.04em;
}

/* FAQ reused */
.faq-section {padding-block:clamp(80px,10vw,140px);}
.faq-list {margin-top:clamp(36px,4vw,56px);max-width:880px;}
details.faq {border-top:1px solid var(--line-strong);padding:28px 0;}
details.faq:last-child {border-bottom:1px solid var(--line-strong);}
details.faq summary {list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);letter-spacing:-0.015em;line-height:1.2;}
details.faq summary::-webkit-details-marker {display:none;}
details.faq .chev {width:36px;height:36px;border:1px solid var(--line-strong);border-radius:999px;display:grid;place-items:center;color:var(--plum);transition:all .35s var(--ease-out);flex-shrink:0;}
details.faq[open] .chev {transform:rotate(45deg);background:var(--plum);color:white;border-color:var(--plum);}
details.faq .answer {margin-top:16px;max-width:720px;font-size:17px;line-height:1.6;color:var(--ink-soft);}