/* ============================================================
   SmartFence – Home Page Styles  (pixel-faithful to design)
   ============================================================ */



/* ── 2. HERO — NOT full viewport, fixed height ── */
.home-hero {
  margin-top: 0;          /* sits behind transparent nav */
  position: relative;
  overflow: hidden;
  height: 580px;          /* fixed height, not 100vh */
  display: flex;
  align-items: center;
}
.home-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.home-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
.home-hero-bg-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg,#0a3d32,#0D7A6B 60%,#1a6b5a);
}
.home-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(5,22,18,.78) 0%,
    rgba(5,22,18,.55) 40%,
    rgba(5,22,18,.12) 75%,
    transparent 100%
  );
}
.home-hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: var(--nav-h); /* push content below transparent nav */
  width: 100%;
}
.home-hero-text { max-width: 620px; }
.home-hero-badge { display: none; } /* not in design */
.home-hero-text h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800; color: white; line-height: 1.18;
  margin-bottom: .875rem;
}
.home-hero-text > p {
  font-size: .9375rem; color: #FFFFFF;
  line-height: 1.7; margin-bottom: 1.75rem; max-width: 580px;
}
.home-hero-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.375rem; }
.home-hero-buttons .btn-white { background: white; color: var(--teal); border-color: white; font-weight: 600; }
.home-hero-buttons .btn-white:hover { background: var(--teal-light); color: var(--teal-dark); border-color: var(--teal-light); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.home-hero-buttons .btn-white-outline { background: transparent; color: white; border-color: rgba(255,255,255,.75); font-weight: 600; }
.home-hero-buttons .btn-white-outline:hover { background: rgba(255,255,255,.15); border-color: white; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.home-hero-trust { font-size: .8125rem; color: #FFFFFF; }

/* ── 3. TRUST BAR — teal, 4 equal cols ── */
.trust-bar { background: var(--teal); padding: 1.5rem; }
.trust-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
  text-align: center; gap: 1rem;
}
.trust-value { font-size: 1.5rem; font-weight: 700; color: white; line-height: 1; margin-bottom: .2rem; }
.trust-label { font-size: .75rem; color: #FFFFFF; }

/* ── 4. PROBLEM / SOLUTION ── */
.ps-section {
  background-color: #F8FAFC;
  padding: 5rem 1.5rem;
}
.ps-section .section-header { margin-bottom: 2.75rem; }
.ps-section .section-header h2 { color: var(--teal); }

.ps-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; max-width: 980px; margin: 0 auto;
  align-items: end;
  margin-top: -88px;
}
.ps-col { display: flex; flex-direction: column; }
.ps-col:first-child { margin-top: 88px; }

.ps-col-label {
  text-align: center; font-size: 1.125rem; font-weight: 600;
  margin-bottom: 12px; color:#4B5563;
}
.ps-col-label.label-solution { color: var(--teal); }

/* SVG card wrapper — fixed height, identical on both */
.ps-card-wrap {
  position: relative; width: 100%; height: 440px;
}
.ps-card-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

/* Both content areas at same top — icons and titles align */
.ps-card-content {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 0;
  padding: 0 2.25rem; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}
.ps-card-content-solution {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 0;
  padding: 0 2.25rem; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}

/* Icon */
.ps-icon-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.ps-icon {
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid;
  display: flex; align-items: center; justify-content: center; background: white;
}
.ps-icon-problem { border-color: #4B5563; }
.ps-icon-solution { border-color: var(--teal); }

/* Title */
.ps-card-title {
  text-align: center; font-size: 1.125rem; font-weight: 700;
  color: #4B5563; margin-bottom: 1.25rem;
}
.ps-card-title.title-solution { color: var(--teal); }

/* List */
.ps-list { padding: 0; width: 100%; display: flex; flex-direction: column; gap: .875rem; }
.ps-list li {
  display: flex; align-items: baseline; gap: .625rem;
  font-size: .9375rem; color: var(--text-body); line-height: 1.5;
}
.ps-list li strong { display: inline; font-weight: 700; }
.ps-list-problem li::before {
  content: '✕'; font-size: .875rem; font-weight: 600; color: #4B5563;
  flex-shrink: 0; padding-right: 6px;
}
.ps-list-solution li::before {
  content: '✓'; font-size: 1rem; font-weight: 700; color: var(--teal);
  flex-shrink: 0; padding-right: 6px;
}

/* ── 5. FENCE PICKET DIVIDER ── */
.fence-divider {
  width: 100%;
  height: 80px;
  background-image: url('../images/home/fence-picket-tile.jpg');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
}

/* ── 6. VISITOR TYPES ── */
.visitor-section { background: #545960; padding: 5rem 1.5rem 4rem; }
.visitor-section .section-header h2 { color: white; margin-bottom: 0; font-size: clamp(1.75rem,3vw,2.375rem); }
.visitor-subtitle-italic {
  display: block; color: #5FE3D5;
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700; font-style: italic; margin-bottom: .875rem;
}
.visitor-section .section-header p { color: #FFFFFF; max-width: 520px; font-size: .9375rem; }

.visitor-layout { max-width: 960px; margin: 3rem auto 0; }
.visitor-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

/* No card box — open layout matching target */
.visitor-card { background: none; border: none; border-radius: 0; padding: 0; }

/* Icons */
.visitor-icon { display: flex; justify-content: center; }
.visitor-icon svg { width: 72px; height: 72px; }

/* Left title: purple. Right title: teal */
.visitor-type { font-size: 1.5rem; font-weight: 700; color: #D99BFF; margin-bottom: 2rem; text-align: center; }
.visitor-cards-row .visitor-card:last-child .visitor-type { color: #5FE3D5; }

/* Steps with vertical connecting line — only between circles, not below last */
.visitor-steps { padding: 0; display: flex; flex-direction: column; position: relative; }

/* Vertical line: from center of circle 1 down to center of circle 3.
   Each li has padding-bottom: 2rem. Line starts at 20px (circle 1 center)
   and ends 20px from bottom (circle 3 center). */
.visitor-card:first-child .visitor-steps::before {
  content: ''; position: absolute;
  left: 19px; top: 20px; bottom: 20px;
  width: 1.5px; background: #D99BFF; z-index: 0;
}
.visitor-card:last-child .visitor-steps::before {
  content: ''; position: absolute;
  left: 19px; top: 20px; bottom: 20px;
  width: 1.5px; background: #5FE3D5; z-index: 0;
}

/* Hide the line portion below circle 2 center to circle 3 center
   by using a white/bg-colored overlay on the last li */
.visitor-steps li:last-child::before {
  content: ''; position: absolute;
  left: 19px; top: 20px; bottom: 0;
  width: 1.5px; background: var(--visitor-bg); z-index: 1;
}

.visitor-steps li {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 0 0 2rem 0; position: relative;
}
.visitor-steps li:last-child { padding-bottom: 0; }

/* Left card: purple outlined circles */
.visitor-card:first-child .visitor-steps li .step-num {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 2px solid #D99BFF !important; color: #D99BFF !important;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .9375rem; font-weight: 600;
  background: var(--visitor-bg) !important;
  position: relative; z-index: 1; margin-top: 0;
}
/* Right card: teal outlined circles */
.visitor-card:last-child .visitor-steps li .step-num {
  width: 40px; height: 40px; flex-shrink: 0;
  border: 2px solid #5FE3D5 !important; color: #5FE3D5 !important;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .9375rem; font-weight: 600;
  background: var(--visitor-bg) !important;
  position: relative; z-index: 1; margin-top: 0;
}

.visitor-steps li strong { display: block; color: white; font-weight: 600; font-size: 1.125rem; margin-bottom: .5rem; }
.visitor-steps li p { font-size: .9rem; color: #FFFFFF; margin: 0; line-height: 1.6; }

/* Funnel */
.visitor-funnel { width: 100%; overflow: visible; display: block; margin-top: 2rem; }

/* Outcome boxes */
.outcome-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; max-width: 960px; margin: 0 auto; }
.outcome-item {
  background: rgba(255,255,255,.08); border-radius: 12px;
  padding: 1.75rem 1.25rem; text-align: center;
  border: 1px solid rgba(255,255,255,.1);
}
.outcome-icon { display: flex; justify-content: center; margin-bottom: .875rem; }
.outcome-item strong { display: block; font-size: 1rem; font-weight: 700; color: white; margin-bottom: .5rem; }
.outcome-item p { font-size: .875rem; color: #FFFFFF; line-height: 1.6; }
.outcome-footnote { text-align: center; font-size: .8125rem; color: #FFFFFF; margin-top: 1.25rem; letter-spacing: .04em; }

/* ── 7. HOW SMARTFENCE WORKS ── */
/* Card structure comes from global styles.css — only section-level overrides here */
.how-section { background: #F6F8F7; padding: 5rem 1.5rem; }
.how-section .section-header h2 { color: var(--teal); }
.how-section .section-header p { font-size: 1rem; }

/* ── 8. BENEFITS ── */
.benefits-section { background: white; padding: 5rem 1.5rem; }
.benefits-section .section-header h2 { color: var(--teal); }
.benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }

.benefit-card {
  background: white;
  border: 2px solid #D1D5DB;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: box-shadow .25s ease, transform .25s ease;
}
.benefit-card:hover {
  box-shadow: 0 8px 28px rgba(13,122,107,.15);
  transform: translateY(-3px);
}
.benefit-img {
  height: 210px; overflow: hidden;
  background: #f1f5f1;
  display: flex; align-items: flex-start; justify-content: center; flex-shrink: 0;
  border: none; border-radius: 0;
  border-bottom: 4px solid var(--teal);
}
.benefit-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .4s ease; display: block;
}
.benefit-card:hover .benefit-img img { transform: scale(1.05); }
.benefit-card h3 {
  font-size: 1.0625rem; font-weight: 700; color: var(--teal);
  padding: 1.25rem 1.25rem .375rem; text-align: left;
  background: #F4FAF8;
}
.benefit-card p {
  font-size: .9rem; color: var(--text-body);
  padding: 0 1.25rem 1.5rem; line-height: 1.65; flex: 1; text-align: left;
  background: #F4FAF8;
}

/* ── TRUSTED BY ── */
.trusted-section { background: white; padding: 3rem 1.5rem; border-top: 1px solid var(--border); }
.trusted-logos { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 1.5rem; }
.trusted-logos img { height: 50px; width: auto; object-fit: contain; }
.logo-placeholder { font-size: .8125rem; font-weight: 500; color: #767676; border: 1.5px solid #c5c5c5; padding: .5rem 1.25rem; border-radius: 6px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .home-hero { min-height: 480px; }
  .trust-bar-inner { grid-template-columns: repeat(2,1fr); gap: 1.25rem; }

  /* PS section */
  .ps-grid { grid-template-columns: 1fr; max-width: 480px; }
  .ps-col:first-child { margin-top: 0; }
  .ps-card-wrap { height: auto; min-height: 400px; }

  /* Visitor section */
  .visitor-cards-row { grid-template-columns: 1fr; }
  .visitor-funnel { display: none; }
  .outcome-row { grid-template-columns: 1fr; gap: .875rem; }

  /* How / Benefits */
  .how-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  /* ── Global ── */
  .section { padding: 2.5rem 1rem; }
  .section-header { margin-bottom: 1.5rem; }
  .section-header h2 { font-size: 1.625rem; }
  .section-header p { font-size: .9375rem; }
  .container { padding: 0 1rem; }

  /* ── Hero ── */
  .home-hero { height: 520px; min-height: unset; align-items: center; }
  .home-hero-bg img { object-position: 70% center; }
  .home-hero-content {
    padding-top: calc(var(--nav-h) + 2rem);
    padding-left: 1.25rem; padding-right: 1.25rem;
  }
  .home-hero-text { max-width: 100%; }
  .home-hero-text h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: .75rem; }
  .home-hero-text > p { font-size: .875rem; margin-bottom: 1.25rem; }
  .home-hero-buttons { flex-direction: column; gap: .625rem; margin-bottom: 1rem; }
  .home-hero-buttons .btn { width: 100%; justify-content: center; text-align: center; }
  .home-hero-trust { font-size: .75rem; line-height: 1.6; }

  /* ── Trust bar ── */
  .trust-bar { padding: 1.25rem 1rem; }
  .trust-bar-inner { grid-template-columns: repeat(2,1fr); gap: .75rem 1rem; }
  .trust-value { font-size: 1.25rem; }
  .trust-label { font-size: .6875rem; }

  /* ── PS section ── */
  .ps-section { padding: 2.5rem 1rem 3rem; }
  .ps-section .section-header { margin-bottom: 1.5rem; }
  .ps-grid { grid-template-columns: 1fr; max-width: 100%; gap: 1.5rem; margin-top: 0; }
  .ps-col:first-child { margin-top: 0; }
  /* On mobile SVG cards look bad — replace with simple bordered box */
  .ps-card-wrap { height: auto; min-height: unset; }
  .ps-card-svg { display: none; }
  .ps-card-content,
  .ps-card-content-solution {
    position: static;
    padding: 1.5rem 1.25rem;
    border: 1.5px solid #9ca3af;
    border-radius: 12px;
    background: white;
  }
  .ps-card-content-solution { border-color: var(--teal); }
  .ps-col-label { font-size: 1rem; margin-bottom: .5rem; }
  .ps-icon { width: 48px; height: 48px; }
  .ps-card-title { font-size: 1rem; margin-bottom: 1rem; }
  .ps-list li { font-size: .875rem; }

  /* ── Fence divider ── */
  .fence-divider { height: 60px; }

  /* ── Visitor section ── */
  .visitor-section { padding: 3rem 1rem 2.5rem; }
  .visitor-layout { margin-top: 2rem; }
  .visitor-cards-row { gap: 2rem; }
  .visitor-icon svg { width: 56px; height: 56px; }
  .visitor-type { font-size: 1.25rem; margin-bottom: 1.25rem; }
  .visitor-steps li { gap: .875rem; padding-bottom: 1.25rem; }
  .visitor-card:first-child .visitor-steps li .step-num,
  .visitor-card:last-child .visitor-steps li .step-num { width: 32px; height: 32px; font-size: .8125rem; }
  .visitor-steps li strong { font-size: .9375rem; }
  .visitor-steps li p { font-size: .8125rem; }
  .visitor-steps li:last-child::before { background: var(--visitor-bg); }
  .outcome-row { grid-template-columns: 1fr; gap: .75rem; }
  .outcome-item { padding: 1.25rem 1rem; }

  /* ── How SmartFence Works ── */
  .how-section { padding: 3rem 1rem; }
  .how-grid { grid-template-columns: 1fr; gap: 2rem; }
  .how-card-image { height: 200px; }
  .how-card-body h3 { font-size: 1.125rem; text-align: left; }
  .how-card-body > p { font-size: .875rem; text-align: left; }
  .how-card-body .check-list li { font-size: .875rem; }

  /* ── Benefits ── */
  .benefits-section { padding: 3rem 1rem; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-img { height: 180px; }
  .benefit-card h3 { font-size: 1rem; padding: 1rem 1rem .375rem; }
  .benefit-card p { font-size: .875rem; padding: 0 1rem 1.25rem; }

  /* ── Trusted by ── */
  .trusted-section { padding: 2rem 1rem; }
  .trusted-logos { gap: 1.5rem; }

  /* ── CTA banner ── */
  .cta-banner { padding: 3rem 1rem; }
  .cta-banner h2 { font-size: 1.5rem; }
  .cta-banner-btns { flex-direction: column; align-items: center; }
  .cta-banner-btns .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ── Footer ── */
  .sf-footer { padding: 2.5rem 1rem 1.5rem; }
  .sf-footer-grid { gap: 1.5rem; }
  .sf-footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .sf-footer-bottom-links { justify-content: center; }
}