* {
  box-sizing: border-box;
}

:root {
  --bg: #f7fbf7;
  --surface: #ffffff;
  --surface-2: #fbfdfb;
  --text: #18332a;
  --muted: #667c72;
  --border: #d8e7dc;
  --deep: #28493c;
  --deep-2: #213a31;
  --primary: #7bbf9d;
  --primary-dark: #5ea685;
  --primary-soft: #eaf6ef;
  --accent-soft: #f3efe4;
  --mint: #d7eee0;
  --shadow: 0 24px 70px rgba(38, 62, 52, 0.12);
  --shadow-soft: 0 18px 40px rgba(38, 62, 52, 0.08);
  --radius: 18px;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 251, 247, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(216, 231, 220, 0.95);
}

.nav {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}

.site-header .logo-brand img {
  display: block;
  width: 335px;
  height: auto;
  object-fit: contain;
}

.footer-brand img {
  width: 340px;
  height: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  margin-left: 8px;
}

.nav-links > a:not(.nav-cta) {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  color: #345347;
}

.nav-links a:hover {
  color: var(--primary-dark);
}

.nav-links .nav-cta {
  color: white;
  background: var(--primary-dark);
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--deep);
  display: block;
  margin: 5px 0;
}

.hero {
  padding: 78px 0 48px;
  background:
    radial-gradient(circle at 85% 15%, rgba(123,191,157,.18), transparent 24%),
    radial-gradient(circle at 8% 10%, rgba(243,239,228,.72), transparent 18%),
    linear-gradient(180deg, #fcfefc 0%, #f7fbf7 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 56px;
}

.eyebrow {
  display: inline-block;
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-eyebrow {
  margin-bottom: 18px;
  padding: 8px 14px;
  background: rgba(123, 191, 157, 0.12);
  border: 1px solid rgba(94,166,133,0.18);
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3.2rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin: 0 0 24px;
  max-width: 650px;
}

.hero h1 span,
.section-heading h2 span {
  color: var(--primary-dark);
}

.hero-copy > p {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.16rem;
  margin: 0 0 30px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-primary {
  background: var(--primary-dark);
  color: white;
  box-shadow: 0 10px 24px rgba(94,166,133,.24);
}

.btn-primary:hover {
  background: #4f8f71;
  transform: translateY(-1px);
}

.btn-secondary {
  background: white;
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: #c7d7cb;
  background: #fbfdfb;
  transform: translateY(-1px);
}

.btn-light {
  background: white;
  color: var(--deep);
  border-color: white;
  box-shadow: 0 10px 30px rgba(33,58,49,.18);
}

.btn-light:hover {
  transform: translateY(-1px);
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-points div {
  background: white;
  border: 1px solid var(--border);
  color: #355347;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 13px;
  box-shadow: 0 8px 20px rgba(38,62,52,.04);
}

.hero-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual-bg {
  position: absolute;
  inset: 30px 10px 40px 30px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.65), transparent 24%),
    linear-gradient(135deg, #eef7f1, #d8eee1 60%, #edf7f1);
}

.floating-badge,
.floating-card {
  position: absolute;
  background: white;
  border: 1px solid rgba(216, 231, 220, 0.95);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  z-index: 4;
}

.floating-badge {
  padding: 12px 16px;
  font-weight: 800;
  color: var(--deep);
}

.badge-top {
  top: 72px;
  right: 6px;
}

.badge-bottom {
  left: 24px;
  bottom: 58px;
}

.floating-card {
  left: -4px;
  bottom: 132px;
  padding: 14px 16px;
}

.floating-card strong,
.floating-card span {
  display: block;
}

.floating-card strong {
  font-size: 0.98rem;
}

.floating-card span {
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 2px;
}

.laptop {
  position: relative;
  width: 620px;
  z-index: 2;
}

.laptop-screen {
  background: #101816;
  padding: 16px 16px 0;
  border-radius: 24px 24px 16px 16px;
  box-shadow: 0 24px 60px rgba(22, 36, 30, 0.22);
}

.mini-site {
  background: white;
  border-radius: 12px 12px 8px 8px;
  overflow: hidden;
  min-height: 365px;
}

.mini-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #edf2ee;
  background: #ffffff;
}

.mini-brand {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--deep);
}

.mini-menu {
  display: flex;
  gap: 8px;
}

.mini-menu span {
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: #d7e3db;
}

.mini-hero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 0;
  min-height: 225px;
}

.mini-copy {
  padding: 34px 24px 22px;
  background: linear-gradient(180deg, #f7fbf8 0%, #eef7f1 100%);
}

.mini-kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 10px;
}

.mini-copy h3 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #18332a;
}

.mini-copy p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.mini-buttons {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.mini-buttons b {
  display: block;
  width: 108px;
  height: 36px;
  border-radius: 999px;
  background: var(--primary-dark);
}

.mini-buttons .outline {
  width: 90px;
  background: transparent;
  border: 1px solid #b9cdc0;
}

.mini-photo {
  background:
    radial-gradient(circle at 30% 28%, rgba(196, 237, 203, .9), transparent 12%),
    radial-gradient(circle at 60% 18%, rgba(140, 198, 149, .8), transparent 12%),
    radial-gradient(circle at 90% 30%, rgba(111, 174, 121, .8), transparent 12%),
    linear-gradient(180deg, rgba(206,233,210,.65), rgba(206,233,210,.2)),
    linear-gradient(155deg, #5b814f 0%, #78a064 36%, #94bc71 64%, #c9dea3 100%);
  position: relative;
}

.mini-photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(93, 137, 73, .2), rgba(61, 104, 46, .95));
}

.mini-photo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 8%;
  bottom: 12%;
  height: 26%;
  border-radius: 18px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    -150px -34px 0 -6px rgba(255,255,255,.12),
    130px -40px 0 -10px rgba(255,255,255,.12),
    -40px -75px 0 -18px rgba(255,255,255,.14);
}

.mini-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px;
}

.mini-services div {
  height: 70px;
  border-radius: 14px;
  border: 1px solid #edf2ee;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

.laptop-base {
  width: 108%;
  height: 22px;
  margin-left: -4%;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(180deg, #c6cdca 0%, #979f9c 70%, #848c88 100%);
  box-shadow: 0 12px 18px rgba(22, 36, 30, 0.12);
}

.phone {
  position: absolute;
  right: 36px;
  bottom: 66px;
  z-index: 3;
  width: 138px;
  background: #111715;
  padding: 10px;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(22, 36, 30, 0.22);
}

.phone-screen {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  min-height: 260px;
}

.phone-site {
  padding: 0 0 16px;
}

.phone-bar {
  height: 36px;
  border-bottom: 1px solid #edf2ee;
  background: linear-gradient(90deg, #ffffff 0%, #f8fbf9 100%);
}

.phone-photo {
  height: 110px;
  background:
    linear-gradient(180deg, rgba(206,233,210,.45), rgba(206,233,210,.05)),
    linear-gradient(155deg, #5b814f 0%, #78a064 36%, #94bc71 64%, #c9dea3 100%);
}

.phone-line {
  height: 10px;
  border-radius: 999px;
  background: #dfe8e2;
  margin: 14px 14px 0;
}

.phone-line.dark {
  height: 16px;
  background: #375447;
  margin-top: 16px;
}

.phone-buttons {
  display: flex;
  gap: 8px;
  margin: 18px 14px 0;
}

.phone-buttons i {
  display: block;
  height: 28px;
  flex: 1;
  border-radius: 999px;
  background: var(--primary-dark);
}

.phone-buttons i:last-child {
  background: transparent;
  border: 1px solid #bdd0c2;
}

.proof-strip {
  padding: 0 0 74px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.proof-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(38,62,52,.05);
}

.proof-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 900;
}

.proof-item strong,
.proof-item span {
  display: block;
}

.proof-item strong {
  font-size: 0.98rem;
}

.proof-item span {
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 2px;
}

.section {
  padding: 92px 0;
}

.section.alt {
  background: linear-gradient(180deg, #eef7f1 0%, #edf4ef 100%);
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 44px;
}

.section-heading h2,
.about-grid h2,
.contact-copy h2,
.cta-band h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.35rem, 4vw, 3.8rem);
  line-height: 1.03;
  letter-spacing: -0.05em;
  margin: 0;
}

.section-heading p,
.about-copy p,
.contact-copy > p,
.cta-band p {
  color: var(--muted);
  margin: 0;
  font-size: 1.02rem;
}

.cards.four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.service-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px;
  min-height: 290px;
  box-shadow: 0 14px 34px rgba(38, 62, 52, 0.05);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--mint) 100%);
}

.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.service-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 800;
}

.service-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #4b6658;
  background: #f2f8f4;
  border: 1px solid #dceadf;
  border-radius: 999px;
  padding: 6px 10px;
}

.service-card h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  line-height: 1.2;
}

.service-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.94rem;
}

.service-card a {
  color: var(--deep);
  font-weight: 800;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.project-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(38, 62, 52, 0.06);
}

.project-screen {
  padding: 14px;
  background: #f7faf8;
}

.screen-browser {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
}

.screen-browser span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cddbd2;
}

.screen-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 230px;
}

.landscape-screen .screen-hero {
  background:
    linear-gradient(180deg, rgba(220,241,222,.35), rgba(220,241,222,.05)),
    linear-gradient(155deg, #5b814f 0%, #78a064 36%, #94bc71 64%, #c9dea3 100%);
}

.roofing-screen .screen-hero {
  background:
    linear-gradient(180deg, rgba(232,236,239,.35), rgba(232,236,239,.05)),
    linear-gradient(145deg, #586471 0%, #7b8796 38%, #9da7b2 68%, #d8dde4 100%);
}

.wash-screen .screen-hero {
  background:
    linear-gradient(180deg, rgba(220,241,244,.35), rgba(220,241,244,.05)),
    linear-gradient(145deg, #5d8895 0%, #74acbb 36%, #8ed1d8 64%, #daf4f6 100%);
}

.screen-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(17,26,23,.02), rgba(17,26,23,.78));
}

.screen-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: white;
  z-index: 2;
}

.screen-overlay small {
  display: block;
  opacity: 0.9;
  margin-bottom: 4px;
}

.screen-overlay h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.08;
}

.screen-overlay p {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.95;
}

.screen-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.screen-panels i {
  display: block;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  border: 1px solid #edf2ee;
}

.project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px;
}

.project-info small {
  color: var(--muted);
}

.project-info h3 {
  margin: 3px 0 0;
  font-size: 1rem;
}

.tag {
  white-space: nowrap;
  background: #f2f7f3;
  border-radius: 30px;
  padding: 8px 10px;
  font-size: 0.72rem;
  color: #4a6256;
  font-weight: 700;
}

.timeline {
  border-top: 1px solid var(--border);
}

.timeline-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 27px 0;
  border-bottom: 1px solid var(--border);
}

.timeline-item > span {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deep);
  color: white;
  border-radius: 50%;
  font-weight: 800;
}

.timeline-item h3 {
  margin: 0 0 5px;
}

.timeline-item p {
  margin: 0;
  color: var(--muted);
}

.dark-section {
  background: linear-gradient(135deg, #29493d, #213c32);
  color: white;
}

.eyebrow.light,
.light-2 {
  color: #c3ead6;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 80px;
}

.about-copy p {
  color: rgba(255,255,255,.74);
  margin-bottom: 18px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 72px;
  align-items: start;
}

.contact-copy > p {
  margin-top: 20px;
}

.contact-points {
  margin-top: 30px;
  display: grid;
  gap: 12px;
  color: #476055;
}

.contact-points span {
  color: var(--primary-dark);
  font-weight: 900;
  margin-right: 8px;
}

.quote-form {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 18px 50px rgba(38,62,52,.08);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

label {
  display: block;
  font-size: 0.84rem;
  color: #355245;
  font-weight: 700;
  margin-bottom: 15px;
}

input,
select,
textarea {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  border: 1px solid #d6e2da;
  border-radius: 10px;
  outline: none;
  background: white;
  color: var(--text);
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 3px rgba(94,166,133,.12);
}

.full {
  width: 100%;
}

.form-note {
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
  margin: 10px 0 0;
}

.form-success {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #e9f7ef;
  color: #2f6c4e;
  font-size: 0.86rem;
  font-weight: 700;
}

.cta-band {
  padding: 0 0 78px;
}

.cta-band-inner {
  background: linear-gradient(135deg, #5aa27f 0%, #6ab18d 48%, #7ec29e 100%);
  color: white;
  border-radius: 28px;
  padding: 42px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  box-shadow: 0 24px 60px rgba(74, 121, 96, 0.22);
}

.cta-band p {
  color: rgba(255,255,255,.82);
  margin-top: 10px;
}

footer {
  background: #20382f;
  color: white;
  padding: 52px 0 24px;
}

.footer-grid {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 40px;
}

.footer-grid p {
  color: rgba(255,255,255,.58);
  max-width: 350px;
}

.footer-links {
  display: flex;
  gap: 24px;
  color: rgba(255,255,255,.76);
  font-size: 0.9rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding-top: 26px;
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.45);
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .hero-grid,
  .section-heading,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .hero {
    padding-top: 64px;
  }

  .proof-grid,
  .cards.four,
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-visual {
    min-height: 520px;
  }

  .laptop {
    width: 580px;
  }

  .cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 28px, 1240px);
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
  }

  .nav {
    min-height: 76px;
  }

  .site-header .logo-brand img {
    width: 215px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 75px;
    left: 14px;
    right: 14px;
    background: white;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links > a:not(.nav-cta) {
    flex: 0 0 auto;
    text-align: left;
  }

  .nav-links a {
    padding: 10px;
  }

  .nav-links .nav-cta {
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 4.4rem);
  }

  .hero-copy > p {
    font-size: 1.03rem;
  }

  .hero-visual {
    min-height: 380px;
  }

  .hero-visual-bg {
    inset: 16px 0 20px;
    border-radius: 24px;
  }

  .laptop {
    width: 100%;
  }

  .mini-site {
    min-height: 270px;
  }

  .mini-hero {
    min-height: 170px;
  }

  .mini-copy {
    padding: 22px 16px 16px;
  }

  .mini-copy h3 {
    font-size: 1.2rem;
  }

  .mini-copy p {
    font-size: 0.76rem;
  }

  .mini-buttons b {
    width: 72px;
    height: 26px;
  }

  .phone {
    width: 96px;
    right: 10px;
    bottom: 36px;
    padding: 7px;
  }

  .phone-screen {
    min-height: 175px;
  }

  .phone-photo {
    height: 74px;
  }

  .floating-badge,
  .floating-card {
    transform: scale(0.86);
    transform-origin: left top;
  }

  .badge-top {
    top: 12px;
    right: -8px;
    transform-origin: right top;
  }

  .badge-bottom {
    left: -6px;
    bottom: 10px;
  }

  .card-left {
    left: -10px;
    bottom: 98px;
  }

  .proof-grid,
  .cards.four,
  .project-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 72px 0;
  }

  .footer-grid,
  .footer-bottom,
  .footer-links {
    flex-direction: column;
  }

  .footer-brand img {
    width: 285px;
  }
}


.project-link {
  display: block;
  color: inherit;
}

.featured-project {
  transition: transform .2s ease, box-shadow .2s ease;
}

.featured-project:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(38, 62, 52, 0.12);
}

.pressure-project-screen {
  padding: 14px;
  background: #f5f8f9;
}

.pressure-preview {
  position: relative;
  min-height: 330px;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1320;
}

.pressure-preview img {
  width: 100%;
  height: 330px;
  display: block;
  object-fit: cover;
}

.pressure-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,19,32,.03) 18%, rgba(11,19,32,.84) 100%);
}

.pressure-preview-overlay {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  color: white;
}

.pressure-preview-overlay small {
  display: block;
  font-weight: 800;
  color: #bfe9fb;
  margin-bottom: 5px;
}

.pressure-preview-overlay h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  line-height: 1.05;
}

.pressure-preview-overlay p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.45;
  color: rgba(255,255,255,.84);
}

.view-demo {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #17372b;
  font-size: .8rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .pressure-preview,
  .pressure-preview img {
    min-height: 280px;
    height: 280px;
  }
}


/* Growth First hero mockup — Pressure Point Services */
.hero-visual .mini-header {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}

.hero-visual .mini-brand {
  color: #0f172a;
}

.hero-visual .mini-menu span {
  background: #cbd5e1;
}

.hero-visual .mini-copy {
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6fa 100%);
}

.hero-visual .mini-kicker {
  color: #0ea5e9;
}

.hero-visual .mini-copy h3 {
  color: #0f172a;
}

.hero-visual .mini-copy p {
  color: #64748b;
}

.hero-visual .mini-buttons b {
  background: #0f172a;
}

.hero-visual .mini-buttons .outline {
  background: transparent;
  border-color: #9ccfe5;
}

.hero-visual .mini-photo {
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.18)),
    url("demos/pressure-point-services/after-driveway-2.jpg");
  background-size: cover;
  background-position: center;
}

.hero-visual .mini-photo::before,
.hero-visual .mini-photo::after {
  display: none;
}

.hero-visual .mini-services div {
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-visual .phone-photo {
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.14)),
    url("demos/pressure-point-services/after-driveway-1.jpg");
  background-size: cover;
  background-position: center;
}

.hero-visual .phone-line.dark {
  background: #0f172a;
}

.hero-visual .phone-line {
  background: #dbe5eb;
}

.hero-visual .phone-buttons i {
  background: #0ea5e9;
}


/* Fill in Pressure Point hero mockup content */
.hero-visual .mini-menu{
  display:flex;
  align-items:center;
  gap:11px;
}

.hero-visual .mini-menu span{
  width:auto;
  height:auto;
  background:transparent;
  border-radius:0;
  font-size:7px;
  line-height:1;
  font-weight:800;
  color:#64748b;
}

.hero-visual .mini-buttons{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.hero-visual .mini-buttons b{
  width:auto;
  height:auto;
  min-height:24px;
  padding:7px 9px;
  border-radius:999px;
  font-size:7px;
  line-height:1;
  font-weight:800;
  color:#fff;
}

.hero-visual .mini-buttons .outline{
  color:#0f172a;
  border:1px solid #9ccfe5;
}

.hero-visual .mini-services div{
  min-height:68px;
  padding:11px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.hero-visual .mini-services strong{
  display:block;
  color:#0f172a;
  font-size:7px;
  line-height:1.15;
  margin-bottom:4px;
}

.hero-visual .mini-services span{
  color:#64748b;
  font-size:6px;
  line-height:1.25;
}

.hero-visual .phone-bar{
  height:auto;
  min-height:24px;
  padding:8px 5px 6px;
  background:#fff;
  color:#0f172a;
  font-size:6px;
  line-height:1;
  font-weight:900;
  text-align:center;
  letter-spacing:.04em;
}

.hero-visual .phone-line,
.hero-visual .phone-line.dark{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  margin:8px 10px 0;
  font-size:7px;
  line-height:1.2;
  text-align:left;
}

.hero-visual .phone-line.dark{
  color:#0f172a;
  font-weight:900;
}

.hero-visual .phone-line:not(.dark){
  color:#64748b;
  margin-top:4px;
}

.hero-visual .phone-buttons{
  display:flex;
  gap:5px;
  padding:9px 10px 0;
}

.hero-visual .phone-buttons i{
  flex:1;
  width:auto;
  height:auto;
  padding:6px 4px;
  border-radius:999px;
  font-style:normal;
  font-size:6px;
  line-height:1;
  font-weight:900;
  color:#fff;
  text-align:center;
}

.hero-visual .phone-buttons i:last-child{
  background:#22c55e;
}


/* Main Street Barber Co. portfolio preview */
.barber-project-screen{
  padding:14px;
  background:#f3eee4;
}
.barber-preview{
  position:relative;
  min-height:330px;
  overflow:hidden;
  border-radius:18px;
  background:#161514;
}
.barber-preview img{
  display:block;
  width:100%;
  height:330px;
  object-fit:cover;
  object-position:center;
}
.barber-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(18,15,13,.02) 20%,rgba(18,15,13,.86) 100%);
}
.barber-preview-overlay{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:2;
  color:#fff;
}
.barber-preview-overlay small{
  display:block;
  margin-bottom:5px;
  color:#e4aa8b;
  font-weight:800;
}
.barber-preview-overlay h3{
  margin:0 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.4rem;
  line-height:1.05;
}
.barber-preview-overlay p{
  margin:0;
  max-width:420px;
  color:rgba(255,255,255,.84);
  font-size:.87rem;
  line-height:1.45;
}
.barber-preview .view-demo{
  background:#f6efe4;
  color:#3b2a22;
}
@media(max-width:760px){
  .barber-preview,.barber-preview img{
    min-height:280px;
    height:280px;
  }
}

/* Pressure Point Services project card — match current green/black brand */
.project-card.featured-project:has(.pressure-preview) {
  border-color: rgba(93,169,48,.35);
  background: #0b0d0c;
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
}
.project-card.featured-project:has(.pressure-preview):hover {
  box-shadow: 0 24px 54px rgba(0,0,0,.2);
  border-color: rgba(139,220,66,.6);
}
.pressure-project-screen {
  background: #090b0a;
}
.pressure-preview {
  background: #0b0d0c;
  border: 1px solid rgba(139,220,66,.28);
}
.pressure-preview::after {
  background: linear-gradient(180deg, rgba(8,10,9,.03) 15%, rgba(8,10,9,.9) 100%);
}
.pressure-preview-overlay small {
  color: #b9f38a;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pressure-preview-overlay h3 {
  color: #fff;
}
.pressure-preview-overlay p {
  color: rgba(231,236,232,.86);
}
.pressure-preview .view-demo {
  border-radius: 8px;
  background: #5da930;
  color: #071006;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.project-card.featured-project:has(.pressure-preview) .project-info {
  background: #0b0d0c;
  border-top: 1px solid rgba(139,220,66,.18);
}
.project-card.featured-project:has(.pressure-preview) .project-info small {
  color: #9ce85f;
}
.project-card.featured-project:has(.pressure-preview) .project-info h3 {
  color: #fff;
}
.project-card.featured-project:has(.pressure-preview) .tag {
  background: rgba(93,169,48,.14);
  color: #b9f38a;
  border-color: rgba(139,220,66,.35);
}

/* Hero device preview — updated Pressure Point Services green/black branding */
.hero-visual .mini-header{background:#090b0a;border-bottom-color:#253025}
.hero-visual .mini-brand{color:#fff}
.hero-visual .mini-menu span{color:#cbd5cb}
.hero-visual .mini-copy{background:linear-gradient(180deg,#0b0d0c 0%,#121712 100%)}
.hero-visual .mini-kicker{color:#8bdc42}
.hero-visual .mini-copy h3{color:#fff}
.hero-visual .mini-copy p{color:#b9c2ba}
.hero-visual .mini-buttons b{background:#5da930;color:#08130f}
.hero-visual .mini-buttons .outline{background:transparent;color:#dce6dc;border-color:rgba(139,220,66,.55)}
.hero-visual .mini-services{background:#0d100e}
.hero-visual .mini-services div{background:linear-gradient(180deg,#111511 0%,#0c0f0d 100%);border-color:#293329}
.hero-visual .mini-services strong{color:#fff}
.hero-visual .mini-services span{color:#9fa9a0}
.hero-visual .phone-bar{background:#090b0a;color:#fff}
.hero-visual .phone-screen,.hero-visual .phone-site{background:#0d100e}
.hero-visual .phone-line.dark{color:#fff}
.hero-visual .phone-line:not(.dark){color:#aeb7b0}
.hero-visual .phone-buttons i{background:#5da930;color:#08130f}
.hero-visual .phone-buttons i:last-child{background:#8bdc42;color:#08130f}


/* Summit Air HVAC portfolio card */
.summit-project-card{border-color:rgba(17,150,255,.24)}
.summit-project-screen{background:linear-gradient(135deg,#071f3c 0%,#0c4f8f 53%,#ff6b00 100%)}
.summit-project-screen .screen-browser{background:#f7fbff;border-bottom-color:rgba(8,31,61,.12)}
.summit-project-screen .screen-browser span:first-child{background:#ff6b00}
.summit-project-screen .screen-browser span:nth-child(2){background:#ffae32}
.summit-project-screen .screen-browser span:nth-child(3){background:#1196ff}
.summit-preview{position:relative;height:100%;min-height:310px;overflow:hidden;background:radial-gradient(circle at 18% 15%,rgba(57,192,255,.32),transparent 30%),radial-gradient(circle at 90% 12%,rgba(255,107,0,.30),transparent 31%),linear-gradient(145deg,#081f3d 0%,#103a68 100%);display:flex;align-items:flex-start;justify-content:center;padding:34px 32px}
.summit-preview>img{width:min(86%,420px);height:112px;object-fit:contain;background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 18px 45px rgba(0,0,0,.22);position:relative;z-index:1}
.summit-preview-overlay{position:absolute;left:0;right:0;bottom:0;padding:58px 28px 26px;color:#fff;background:linear-gradient(180deg,transparent 0%,rgba(5,18,36,.75) 28%,rgba(5,18,36,.98) 100%)}
.summit-preview-overlay small{color:#7ed9ff;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.summit-preview-overlay h3{margin:7px 0 7px;font-size:24px;color:#fff}
.summit-preview-overlay p{margin:0 0 12px;color:#dceaf6;line-height:1.5}
.summit-preview-overlay .view-demo{color:#ff9a40;font-weight:800}
.summit-project-card .project-info{background:linear-gradient(90deg,#071f3c,#0e3158);color:#fff}
.summit-project-card .project-info small{color:#7ed9ff}
.summit-project-card .project-info h3{color:#fff}
.summit-project-card .tag{background:#ff6b00;color:#fff;border-color:#ff6b00}
@media(max-width:640px){.summit-preview{min-height:330px;padding:28px 18px}.summit-preview>img{width:92%;height:102px}.summit-preview-overlay{padding:52px 20px 22px}}

/* Live quote form states */
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-error{display:none;margin-top:14px;padding:13px 15px;border-radius:10px;background:#fff1f1;color:#9d2424;font-weight:700;border:1px solid #f1caca}
.quote-form button:disabled{opacity:.72;cursor:not-allowed}

/* ================================
   Modern sales-focused refresh
   ================================ */
:root{
  --ink:#0b1712;
  --green:#5ea685;
  --green-2:#86c7aa;
  --lime:#bfe6d3;
  --dark:#08130f;
}

body{overflow-x:hidden;background:#f7faf8}
.site-header{transition:box-shadow .3s ease,background .3s ease}
.site-header.scrolled{box-shadow:0 12px 35px rgba(7,16,12,.10);background:rgba(255,255,255,.9)}

.hero-modern{position:relative;overflow:hidden;padding:54px 0 30px;background:#08130f;color:#fff;isolation:isolate}
.hero-modern::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(94,166,133,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(94,166,133,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 88%);z-index:-2}
.hero-modern::after{content:"";position:absolute;width:700px;height:700px;right:-260px;top:-360px;border-radius:50%;background:radial-gradient(circle,rgba(94,166,133,.24),transparent 65%);z-index:-2}
.hero-glow{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;z-index:-1}
.glow-one{width:220px;height:220px;left:-80px;top:210px;background:rgba(94,166,133,.13)}
.glow-two{width:160px;height:160px;right:8%;bottom:2%;background:rgba(134,199,170,.1)}
.hero-modern-inner{position:relative}
.hero-copy-modern{text-align:center;max-width:880px;margin:0 auto 34px}
.hero-copy-modern .eyebrow{color:var(--green-2);border-color:rgba(134,199,170,.22);background:rgba(94,166,133,.09)}
.hero-copy-modern h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(3.1rem,7vw,6.7rem);font-weight:800;line-height:.92;letter-spacing:-.065em;max-width:900px;margin:0 auto 20px}
.hero-copy-modern h1 span{color:var(--green-2)}
.hero-copy-modern p{max-width:670px;margin:0 auto 24px;color:rgba(255,255,255,.7);font-size:1.05rem}
.hero-modern .btn-primary{background:var(--green);color:#08130f;box-shadow:0 12px 32px rgba(94,166,133,.22)}
.hero-modern .btn-primary:hover{background:var(--green-2)}
.hero-modern .btn-secondary{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#fff}
.hero-modern .btn-secondary:hover{background:rgba(255,255,255,.09);border-color:rgba(134,199,170,.5)}

.demo-showcase{max-width:1160px;margin:0 auto;position:relative}
.showcase-topline{display:flex;justify-content:space-between;align-items:center;margin:0 6px 10px;color:rgba(255,255,255,.56);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.showcase-topline>span:first-child{display:flex;align-items:center;gap:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(94,166,133,.09);animation:pulseDot 1.8s infinite}
.showcase-counter b{color:#fff}
.showcase-stage{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.demo-track{width:min(100%,1030px);position:relative;min-height:540px}
.demo-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(70px) scale(.97);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),visibility .45s;pointer-events:none}
.demo-slide.active{opacity:1;visibility:visible;transform:translateX(0) scale(1);pointer-events:auto}
.browser-frame{height:540px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#101713;box-shadow:0 35px 100px rgba(0,0,0,.48),0 0 0 1px rgba(94,166,133,.05);overflow:hidden;position:relative}
.browser-bar{height:38px;background:#141c17;border-bottom:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:100px 1fr 40px;align-items:center;padding:0 13px;color:rgba(255,255,255,.4);font-size:10px}
.browser-dots{display:flex;gap:6px}.browser-dots span{width:8px;height:8px;border-radius:50%;background:#3b463f}.browser-dots span:first-child{background:#65736a}.browser-lock{text-align:right;color:var(--green);font-size:7px}
.browser-frame iframe{display:block;width:100%;height:calc(100% - 38px);border:0;background:#fff}
.demo-hover-label{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(7,16,12,.82);backdrop-filter:blur(12px);border:1px solid rgba(134,199,170,.18);color:#fff;opacity:.95;transform:translateY(0);transition:.25s}
.demo-hover-label span{font-size:.65rem;color:var(--green-2);font-weight:800;letter-spacing:.1em}.demo-hover-label strong{font-size:.78rem}
.browser-frame:hover .demo-hover-label{transform:translateY(-4px);border-color:rgba(134,199,170,.45)}
.demo-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(7,16,12,.8);backdrop-filter:blur(12px);color:#fff;font-size:1.2rem;cursor:pointer;transition:.25s}
.demo-arrow:hover{background:var(--green);color:#08130f;border-color:var(--green);box-shadow:0 12px 28px rgba(94,166,133,.24)}
.demo-prev{left:0}.demo-next{right:0}
.demo-controls{display:flex;justify-content:center;gap:8px;margin-top:14px}.demo-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:.25s}.demo-dot.active{width:30px;border-radius:20px;background:var(--green)}
.demo-caption{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px;color:#fff}.demo-caption strong{font-size:.95rem}.demo-caption span{font-size:.8rem;color:rgba(255,255,255,.48);padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}.demo-caption a{font-size:.78rem;color:var(--green-2);font-weight:800}
.hero-proof-row{display:grid;grid-template-columns:repeat(3,1fr);max-width:880px;margin:28px auto 0;border-top:1px solid rgba(255,255,255,.1)}
.hero-proof-row>div{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 12px;color:rgba(255,255,255,.56);font-size:.8rem}.hero-proof-row>div+div{border-left:1px solid rgba(255,255,255,.1)}.hero-proof-row strong{color:var(--green-2);font-size:.68rem;letter-spacing:.1em}

.ticker{overflow:hidden;background:#101a14;border-top:1px solid rgba(94,166,133,.12);border-bottom:1px solid rgba(94,166,133,.12);white-space:nowrap}.ticker-track{display:inline-flex;align-items:center;gap:24px;min-width:max-content;padding:14px 0;animation:tickerMove 28s linear infinite}.ticker span{font-size:.7rem;font-weight:900;letter-spacing:.14em;color:rgba(255,255,255,.58)}.ticker b{font-size:.7rem;color:var(--green)}

.modern-proof{padding:28px 0 78px;background:#08130f}.modern-proof .proof-grid{gap:0;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}.modern-proof .proof-item{border:0;border-radius:0;background:#0d1711;box-shadow:none;color:#fff;min-height:105px}.modern-proof .proof-item+.proof-item{border-left:1px solid rgba(255,255,255,.08)}.modern-proof .proof-item strong{color:#fff}.modern-proof .proof-item span{color:rgba(255,255,255,.5)}.modern-proof .proof-icon{background:rgba(94,166,133,.1);color:var(--green-2)}

.section{position:relative;overflow:hidden}.section::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-160px;top:80px;background:rgba(94,166,133,.06);pointer-events:none}.section-heading h2{font-family:Inter,system-ui,sans-serif;font-weight:800;letter-spacing:-.055em}.service-card,.project-card,.quote-form,.proof-item{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.service-card:hover,.project-card:hover,.proof-item:hover{transform:translateY(-7px)}.service-card:hover{box-shadow:0 22px 50px rgba(38,62,52,.11);border-color:rgba(94,166,133,.45)}
.service-card::after{content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-35px;bottom:-35px;background:rgba(94,166,133,.07);transition:.35s}.service-card:hover::after{transform:scale(2)}
.project-card{position:relative}.project-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;pointer-events:none;transition:.3s}.project-card:hover::after{border-color:rgba(94,166,133,.3)}
.timeline-item{transition:padding-left .3s ease}.timeline-item:hover{padding-left:10px}.timeline-item>span{transition:.3s}.timeline-item:hover>span{background:var(--green);color:#08130f;transform:rotate(8deg) scale(1.08)}
.dark-section{position:relative;overflow:hidden}.dark-section::before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(94,166,133,.1);border-radius:50%;right:-260px;top:-170px;box-shadow:0 0 0 80px rgba(94,166,133,.025),0 0 0 160px rgba(94,166,133,.015)}
.cta-band-inner{position:relative;overflow:hidden}.cta-band-inner::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-180px;background:rgba(255,255,255,.11)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 5px rgba(94,166,133,.08)}50%{box-shadow:0 0 0 10px rgba(94,166,133,.02)}}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:1100px){.browser-frame{height:500px}.demo-track{min-height:500px}.showcase-stage{min-height:520px}.modern-proof .proof-grid{grid-template-columns:repeat(2,1fr)}.modern-proof .proof-item:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08)}.modern-proof .proof-item:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}}
@media(max-width:760px){.hero-modern{padding-top:38px}.hero-copy-modern h1{font-size:clamp(2.8rem,14vw,4.4rem)}.hero-copy-modern p{font-size:.95rem}.hero-modern .hero-actions{justify-content:center}.showcase-topline{font-size:.62rem}.showcase-stage{min-height:390px}.demo-track{min-height:390px}.browser-frame{height:390px;border-radius:14px}.browser-bar{height:31px;grid-template-columns:62px 1fr 20px;font-size:7px;padding:0 9px}.browser-frame iframe{height:calc(100% - 31px)}.demo-arrow{width:38px;height:38px;font-size:1rem}.demo-prev{left:-5px}.demo-next{right:-5px}.demo-hover-label{display:none}.demo-caption{gap:8px;flex-wrap:wrap}.demo-caption strong{font-size:.82rem}.demo-caption span{padding-left:8px}.hero-proof-row{grid-template-columns:1fr;margin-top:22px}.hero-proof-row>div{padding:12px}.hero-proof-row>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.modern-proof{padding-bottom:60px}.modern-proof .proof-grid{grid-template-columns:1fr}.modern-proof .proof-item+.proof-item,.modern-proof .proof-item:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08)}.ticker-track{animation-duration:22s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker-track,.live-dot{animation:none}.reveal,.demo-slide{transition:none}.demo-slide{transform:none!important}.demo-slide:not(.active){display:none}}

/* Homepage palette refinement: off-white + mint + deep forest */
:root {
  --bg: #f7faf8;
  --surface: #ffffff;
  --surface-2: #fbfdfc;
  --text: #17362d;
  --muted: #60776e;
  --border: #d9e8e1;
  --deep: #173b31;
  --deep-2: #20483b;
  --primary: #5ea685;
  --primary-dark: #4f9273;
  --primary-soft: #e6f5ee;
  --mint: #ccebdd;
}

/* Keep the homepage bright and airy rather than black-heavy. */
.hero.hero-modern {
  background:
    radial-gradient(circle at 84% 14%, rgba(94,166,133,.18), transparent 25%),
    radial-gradient(circle at 8% 8%, rgba(204,235,221,.58), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #f7faf8 62%, #eef7f2 100%);
}

.hero-modern::after {
  content: "";
  display: block;
  height: 5px;
  width: min(1240px, calc(100% - 40px));
  margin: 38px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #5ea685 18%, #ccebdd 50%, #5ea685 82%, transparent);
  opacity: .7;
}

.hero-glow {
  opacity: .5;
}

.hero-modern .demo-showcase,
.hero-modern .demo-frame,
.hero-modern .demo-browser {
  border-color: rgba(94,166,133,.24);
}

.hero-modern .demo-showcase {
  box-shadow: 0 30px 80px rgba(23,59,49,.14);
}

/* Forest green replaces the stark black device frame on the homepage. */
.hero-modern .laptop-screen,
.hero-modern .phone {
  background: #173b31;
}

.hero-modern .laptop-screen {
  box-shadow: 0 28px 70px rgba(23,59,49,.18);
}

.hero-modern .phone {
  box-shadow: 0 24px 60px rgba(23,59,49,.18);
}

.hero-modern .hero-points div {
  background: rgba(255,255,255,.9);
  border-color: rgba(94,166,133,.2);
}

.hero-modern .demo-controls .demo-dot.active,
.hero-modern .demo-arrow:hover {
  background: #5ea685;
  border-color: #5ea685;
}

.hero-modern .demo-caption a,
.hero-modern .showcase-counter,
.hero-modern .eyebrow {
  color: #4f9273;
}

/* Homepage proof strip stays white with soft mint depth. */
.modern-proof {
  background: linear-gradient(180deg, #eef7f2 0%, #f7faf8 100%);
}

.modern-proof .proof-item {
  box-shadow: 0 14px 34px rgba(23,59,49,.06);
}

/* Homepage readability refinement: use the same deep green as the navigation for text on the light hero. */
.hero.hero-modern,
.hero.hero-modern .hero-copy-modern h1,
.hero.hero-modern .hero-copy-modern p,
.hero.hero-modern .showcase-topline,
.hero.hero-modern .demo-caption,
.hero.hero-modern .hero-proof-row > div {
  color: #17362d;
}

.hero.hero-modern .hero-copy-modern p {
  color: #60776e;
}

.hero.hero-modern .showcase-topline,
.hero.hero-modern .hero-proof-row > div {
  color: #60776e;
}

.hero.hero-modern .showcase-counter b,
.hero.hero-modern .demo-caption strong {
  color: #17362d;
}

.hero.hero-modern .demo-caption span {
  color: #60776e;
  border-left-color: rgba(23,54,45,.18);
}

.hero.hero-modern .hero-proof-row {
  border-top-color: rgba(23,54,45,.12);
}

.hero.hero-modern .hero-proof-row > div + div {
  border-left-color: rgba(23,54,45,.12);
}

.hero.hero-modern .hero-modern .btn-secondary,
.hero.hero-modern .btn-secondary {
  color: #17362d;
  background: rgba(255,255,255,.72);
  border-color: rgba(23,54,45,.18);
}

.hero.hero-modern .btn-secondary:hover {
  color: #17362d;
  background: #ffffff;
  border-color: #5ea685;
}

.hero.hero-modern .demo-dot {
  background: rgba(23,54,45,.2);
}

@media(max-width:760px){
  .hero.hero-modern .hero-proof-row > div + div {
    border-left: 0;
    border-top-color: rgba(23,54,45,.12);
  }
}


/* Final homepage polish: centered CTAs + stronger demo action */
.hero-modern .hero-actions {
  justify-content: center;
  align-items: center;
}

.hero-modern .hero-actions .btn {
  min-width: 205px;
}

.hero-modern .demo-caption a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--deep);
  border: 1px solid rgba(79,146,115,.28);
  box-shadow: 0 8px 20px rgba(23,59,49,.10);
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .01em;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-modern .demo-caption a:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(23,59,49,.16);
}

@media (max-width:760px) {
  .hero-modern .hero-actions .btn { min-width: 0; }
  .hero-modern .hero-actions { width: 100%; }
  .hero-modern .hero-actions .btn { flex: 1 1 100%; }
}