/* ============================================================
   HOMEPAGE — page-homepage.css
   Depends on global: wrap, section-white, section-cream, section-dark,
   eyebrow, accent, section-head, btn-primary, btn-secondary, btn-dark,
   btn-outline-light, icon-badge, checklist, faq-list, faq-item, faq-q,
   faq-a, faq-toggle, footer
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   Shared layout utilities
   ───────────────────────────────────────────────────────── */
.home-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.home-three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
@media (max-width: 600px) {
  .home-two-col, .home-three-col { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   1. HERO
   ───────────────────────────────────────────────────────── */
.home-hero2 { display: grid; grid-template-columns: 1.35fr .65fr; gap: 64px; align-items: center; }
@media (max-width: 900px) {
  .home-hero2 { grid-template-columns: 1fr; gap: 40px; }
  .home-portrait { max-width: 250px; margin: 0 auto; }
}
.home-chips-block {
  margin: 30px 0;
}
@media (max-width: 767px) {
  .home-chips-block {
    margin: 20px 0;
  }
}
.home-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(61, 255, 176, .09); border: 1px solid rgba(61, 255, 176, .28);
  border-radius: 50px; padding: 9px 18px; font-size: 13px; font-weight: 700; color: #3dffb0;
  margin: 0 10px 8px 0;
}

.home-portrait {
  position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;
  background: #06061a; border: 4px solid #3dffb0;
  box-shadow: 0 0 0 12px rgba(61, 255, 176, .12), 0 20px 50px rgba(0, 0, 0, .35);
}
.home-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.home-portrait-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; ; text-align: center; padding: 20px; border-radius: 50%;
}
.home-portrait-ph .home-mono {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8); line-height: 1.6;
}

.home-statbar { background: rgba(255, 255, 255, .05); border-top: 1px solid rgba(255, 255, 255, .07); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.home-statbar-inner { max-width: 1160px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); }
.home-statbar-item { padding: 28px 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, .07); }
.home-statbar-item:last-child { border-right: none; }
.home-stat-top { font-size: 10px; color: rgba(255, 255, 255, 0.8); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.home-stat-num { font-size: 36px; font-weight: 800; color: #3dffb0; letter-spacing: -.04em; line-height: 1; }
.home-stat-bot { font-size: 12px; color: rgba(255, 255, 255, 0.8); margin-top: 6px; }
@media (max-width: 768px) {
  .home-statbar-inner { grid-template-columns: 1fr 1fr; padding: 0 20px; }
  .home-statbar-item:nth-child(2) { border-right: none; }
  .home-statbar-item:nth-child(1), .home-statbar-item:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .07); }
}

/* ─────────────────────────────────────────────────────────
   2. PLATFORM STRIP
   ───────────────────────────────────────────────────────── */
.home-logostrip { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .home-logostrip { grid-template-columns: 1fr; gap: 24px; } }
.home-logostrip-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: 20px; }
.home-logostrip-names { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.home-logostrip-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #374151; }
.home-logostrip-name.is-first { color: #111827; }
.home-logostrip-text { font-size: 16px; color: #6b7280; line-height: 1.7; }

/* ─────────────────────────────────────────────────────────
   3. PAIN CARDS
   ───────────────────────────────────────────────────────── */
.home-pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width:1024px) { .home-pain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:600px) { .home-pain-grid { grid-template-columns: 1fr ; } }
.home-pain-card { background: #fff; border: 1px solid #e8e6e0; border-radius: 16px; padding: 26px; }
.home-pain-title { font-size: 16.5px; margin-bottom: 10px; line-height: 1.35; }
.home-pain-desc { font-size: 14px; color: #6b7280; line-height: 1.65; }

/* ─────────────────────────────────────────────────────────
   4. PROOF (case studies teaser)
   ───────────────────────────────────────────────────────── */
.home-proof-card { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.home-proof-stat { font-size: 34px; font-weight: 800; color: #3dffb0; letter-spacing: -.04em; line-height: 1; }
.home-proof-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin: 8px 0 18px; }
.home-proof-title { font-size: 16.5px; color: #fff; margin-bottom: 10px; line-height: 1.4; }
.home-proof-desc { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 1.7; margin-bottom: 18px; }
.home-proof-link { margin-top: auto; font-size: 13.5px; font-weight: 700; color: #3dffb0; text-decoration: none; }

/* ─────────────────────────────────────────────────────────
   5. GIVEAWAY BAND
   ───────────────────────────────────────────────────────── */
.home-giveaway-box {
  background: rgba(61, 255, 176, .06); border: 1px solid rgba(61, 255, 176, .28); border-radius: 20px;
  padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.home-giveaway-badge {
  display: inline-flex; align-items: center; gap: 9px; background: rgba(61, 255, 176, .12);
  border: 1px solid rgba(61, 255, 176, .3); border-radius: 50px; padding: 7px 15px;
  font-size: 12px; font-weight: 700; color: #3dffb0; margin-bottom: 16px;
}
.home-giveaway-dot { width: 7px; height: 7px; border-radius: 50%; background: #3dffb0; display: inline-block; }

/* ─────────────────────────────────────────────────────────
   6. VIDEO
   ───────────────────────────────────────────────────────── */
.home-vid {
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px;
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s; overflow: hidden;
}
.home-vid:hover { border-color: rgba(61, 255, 176, .4); }
.home-vid iframe, .home-vid video { width: 100%; height: 100%; border: 0; }
.home-play {
  width: 76px; height: 54px; border-radius: 14px; background: #3dffb0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 60px 12px rgba(61, 255, 176, .35);
}

/* ─────────────────────────────────────────────────────────
   7. OWNERSHIP TIERS (support model cards)
   ───────────────────────────────────────────────────────── */
.home-own-card { background: #fff; border: 1px solid #e8e6e0; border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.home-own-card.is-featured {
  background: linear-gradient(180deg, rgba(61, 255, 176, .10) 0%, rgba(255, 255, 255, 1) 55%);
  border-color: rgba(61, 255, 176, .55); box-shadow: 0 0 0 4px rgba(61, 255, 176, .07), 0 18px 44px rgba(61, 255, 176, .10);
}
.home-own-title { font-size: 21px; margin-bottom: 10px; }
.home-own-desc { font-size: 14.5px; color: #6b7280; line-height: 1.6; margin-bottom: 6px; }
.home-own-row { padding: 16px 0; border-bottom: 1px dashed #e8e6e0; }
.home-own-lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.home-own-val { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.45; }
.home-own-val.is-response { color: #0f9d63; }
.home-own-summary { font-size: 14px; color: #374151; line-height: 1.6; padding: 18px 0; margin-bottom: 20px; }

.home-own-card.is-featured .btn-navy { background: #3dffb0; color: #06061a !important; border-color: #3dffb0;}
.home-own-card.is-featured .btn-navy:hover { background: #06061a; color: #3dffb0 !important;  }

/* ─────────────────────────────────────────────────────────
   8. SCOPE CARDS
   ───────────────────────────────────────────────────────── */
.home-scope-card { background: #fff; border: 1px solid #e8e6e0; border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; }
.home-scope-title { font-size: 19px; margin-bottom: 16px; line-height: 1.3; }
.home-scope-outcome {
  margin-top: auto; align-self: flex-start; background: rgba(61, 255, 176, .18); color: #0b6b47;
  font-size: 12.5px; font-weight: 700; border-radius: 50px; padding: 8px 16px;
}

/* ─────────────────────────────────────────────────────────
   9. HANDOVER TIMELINE
   ───────────────────────────────────────────────────────── */
.home-tl { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .home-tl { grid-template-columns: 1fr; gap: 36px; } }
.home-tl-step { display: grid; grid-template-columns: 56px 1fr; gap: 22px; position: relative; padding-bottom: 44px; }
.home-tl-step:last-child { padding-bottom: 0; }
.home-tl-step::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 1px; background: rgba(255, 255, 255, .12); }
.home-tl-step:last-child::before { display: none; }
.home-tl-num {
  width: 54px; height: 54px; border-radius: 50%; background: #11113a; border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; z-index: 1;
}
.home-tl-step.is-final .home-tl-num { background: #3dffb0; border-color: #3dffb0; color: #06061a; box-shadow: 0 0 34px rgba(61, 255, 176, .4); }
.home-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.home-tl-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.home-tl-step.is-final .home-tl-title { color: #3dffb0; }
.home-tl-pill { background: rgba(61, 255, 176, .1); border: 1px solid rgba(61, 255, 176, .25); color: #3dffb0; font-size: 11.5px; font-weight: 700; border-radius: 50px; padding: 6px 13px; white-space: nowrap; }
.home-tl-body { font-size: 14.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.7; }
.home-tl-loop { display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; padding: 16px 18px; margin: 30px 0; }
.home-tl-loop-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(61, 255, 176, .12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-tl-loop-text { font-size: 13.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }

/* ─────────────────────────────────────────────────────────
   10. COMMITMENTS (stepgrid)
   ───────────────────────────────────────────────────────── */
.home-stepgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .home-stepgrid { grid-template-columns: 1fr; } }
.home-stepbox { background: #fafbfc; border: 1px solid #e8e6e0; border-radius: 16px; padding: 26px 28px; }
.home-stepbox-badge { width: 44px; height: 44px; border-radius: 12px; background: #06061a; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #3dffb0; font-weight: 800; font-size: 15px; }
.home-stepbox h4 { font-size: 17px; margin-bottom: 8px; letter-spacing: -.01em; }
.home-stepbox p { font-size: 14.5px; color: #6b7280; line-height: 1.7; }

/* ─────────────────────────────────────────────────────────
   11. OWNERSHIP VS BREAK-FIX COMPARISON TABLE
   ───────────────────────────────────────────────────────── */
.home-ctable { border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; overflow: hidden; margin-bottom: 40px; }
.home-ctable-row { display: grid; grid-template-columns: .55fr 1fr 1.1fr; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .07); }
@media (max-width: 767px) {
  .home-ctable-row {
    grid-template-columns: 1fr;
  }
}
.home-ctable-row:last-child { border-bottom: none; }
.home-ctable-row.is-header { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.home-ctable-cell { padding: 20px 24px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.home-ctable-without { padding: 20px 24px; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.home-ctable-with { padding: 20px 24px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(61, 255, 176, .05); display: flex; align-items: center; gap: 10px; }
.home-ctable-with::before { content: '\2713'; color: #3dffb0; margin-right: 8px; }
.home-ctable-row.is-header .home-ctable-with::before { content: ''; margin: 0; }
.home-ctable-header-label { padding: 20px 24px; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.home-ctable-header-value {
  padding: 20px 24px; font-size: 15px; font-weight: 700; color: #fff; background: rgba(61, 255, 176, .05);
  display: flex; align-items: center; gap: 10px;
}
.home-ctable-badge { background: rgba(61, 255, 176, .15); color: #3dffb0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; padding: 4px 10px; }

/* ─────────────────────────────────────────────────────────
   12. PLATFORM COVERAGE
   ───────────────────────────────────────────────────────── */
.home-platform-list { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.home-platform-row { display: grid; grid-template-columns: .55fr 1fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
@media (max-width: 767px) {
  .home-platform-row {
    grid-template-columns: 1fr;
    padding: 20px 0;
  }
}
.home-platform-row:last-child { border-bottom: none; }
.home-platform-name-group { display: flex; align-items: center; gap: 12px; }
.home-platform-icon { color: #3dffb0; display: flex; }
.home-platform-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.home-platform-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.home-platform-tag { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50px; padding: 8px 18px; font-size: 14px; color: #fff; }

/* ─────────────────────────────────────────────────────────
   13. GOOGLE REVIEWS
   ───────────────────────────────────────────────────────── */
.home-gr-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; justify-content: space-between; }
.home-gr-div { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.home-gr-score { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #111827; }
.home-gr-stars { display: flex; gap: 3px; }
.home-gr-count { font-size: 14px; color: #6b7280; }
.home-gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 860px) { .home-gr-grid { grid-template-columns: 1fr; } }
.home-gr-card { background: #fff; border: 1px solid #e8e6e0; border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
.home-gr-stars-sm { display: flex; gap: 2px; margin-bottom: 14px; }
.home-gr-text { font-size: 14.5px; color: #374151; line-height: 1.7; margin-bottom: 20px; }
.home-gr-author { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.home-gr-avatar { width: 34px; height: 34px; border-radius: 50%; background: #f5f4f0; color: #374151; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }
.home-gr-author-name { font-size: 13.5px; font-weight: 700; color: #111827; }
.home-gr-author-date { font-size: 12px; color: #6b7280; }

/* ─────────────────────────────────────────────────────────
   14. AGENCY STRIP
   ───────────────────────────────────────────────────────── */
.home-agency-box {
  background: #06061a; border-radius: 20px; padding: 38px 44px; display: flex;
  align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.home-agency-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #3dffb0; margin-bottom: 10px; }
.home-agency-text { font-size: 17px; color: rgba(255, 255, 255, 0.8); line-height: 1.65; }

/* ─────────────────────────────────────────────────────────
   15. BLOG
   ───────────────────────────────────────────────────────── */
.home-bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .home-bl-grid { grid-template-columns: 1fr; } }
.home-bl-post { background: #fff; border: 1px solid #e8e6e0; border-radius: 16px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.home-bl-post:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(6, 6, 26, .08); }
.home-bl-img { background: linear-gradient(140deg, #1414c8, #06061a); min-height: 170px; }
.home-bl-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.home-bl-tag { align-self: flex-start; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 50px; padding: 5px 11px; margin-bottom: 14px; background: rgba(20, 20, 200, .08); color: #1414c8; }
.home-bl-post h3 { font-size: 18px; color: #111827; line-height: 1.35; margin-bottom: 10px; letter-spacing: -.02em; }
.home-bl-post p { font-size: 14px; color: #6b7280; line-height: 1.65; margin-bottom: 18px; }
.home-bl-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b7280; flex-wrap: wrap; }
.home-bl-dot { width: 3px; height: 3px; border-radius: 50%; background: #c9ccd6; }

/* ─────────────────────────────────────────────────────────
   16. CTA GLOW
   ───────────────────────────────────────────────────────── */
.home-ctaglow { position: relative; background: #0a0a2e; padding: 110px 48px; text-align: center; overflow: hidden; }
.home-ctaglow::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 70%; height: 180%;
  background: radial-gradient(circle, rgba(80, 60, 220, .45) 0%, rgba(10, 10, 46, 0) 62%); pointer-events: none;
}
.home-ctaglow > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .home-ctaglow { padding: 56px 20px; }
}

.home-giveaway-box > div,
.home-agency-box > div {
  max-width: 660px;
}
ul.checklist.ap-marketing-checklist {
  margin: 0 0 20px 0;
}
.btns-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.home-own-summary span svg {
  width: 18px;
}
.btns-block {
  margin: 50px 0 0;
}
.blogs-btn {
  margin: 40px 0 0;
}
@media (max-width: 767px) {
  .btns-block {
    margin: 30px 0 0;
  }
}
@media (max-width: 991px) {
  .home-pain-card,
  .home-proof-card,
  .home-own-card,
  .home-scope-card,
  .home-stepbox,
  .home-gr-card,
  .home-bl-body  {
    padding: 20px;
  }
  .icon-badge {
    width: 40px;
    height: 40px;
  }
  .home-proof-stat {
    font-size: 28px;
  }
  .home-giveaway-box {
    padding: 30px;
    gap: 20px;
  }
  .home-ctable-without,
  .home-ctable-cell,
  .home-ctable-with {
    padding: 10px 15px;
  }
  .home-agency-box {
    padding: 30px;
  }
}

.plateform-logo img {
  height: 50px !important;
  height: auto;
  object-fit: cover;
}

.home-logostrip-slider {
  width: 100%;
}

.home-logostrip-slider .plateform-logos {
  width: auto;
}

.home-logostrip-slider .slick-track,
.home-logostrip-slider .slick-list {
  width: 100%;
}

.home-logostrip-slider {
  display: flex;
  gap: 20px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
  width: 90%;
}
.plateform-logo {
  display: flex;
  justify-content: center;
}
.plateform-logo {
  display: flex;
  justify-content: center;
}

.home-logostrip-slider .slick-arrow:before {
  color: #06061a;
  font-size: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19M12 19L19 12L12 5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
  content: '';
  background-size: 20px;
  width: 20px;
  height: 20px;
  display: block;
}
.home-logostrip-slider .slick-arrow.slick-prev:before {
  transform: rotate(180deg);
}
.home-logostrip-slider .slick-track {
  display: flex;
  align-items: center;
}