/* ==========================================================================
   Homepage-specific styles
   ========================================================================== */

.container-narrow{ max-width: 760px; }

/* ---- Hero ---- */
.hero{ padding-block: 56px 80px; overflow:hidden; position:relative; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(680px 320px at 8% -10%, rgba(43,140,255,.14), transparent),
    radial-gradient(560px 300px at 100% 10%, rgba(63,203,107,.14), transparent);
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-copy h1{ font-size: clamp(30px, 4.6vw, 50px); font-weight:800; margin-block:16px 18px; }
.hero-copy p{ color: var(--color-text-muted); font-size:17.5px; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-meta{ display:flex; gap:32px; margin-top:40px; flex-wrap:wrap; }
.hero-meta-item{ display:flex; flex-direction:column; }
.hero-meta-item strong{ font:800 24px/1 var(--font-display); color: var(--color-text); }
.hero-meta-item span{ font-size:12.5px; color: var(--color-text-muted); margin-top:2px; }

.browser-mock{
  border-radius:16px; overflow:hidden; border:1px solid var(--color-border);
  box-shadow: var(--shadow-lift); background: var(--color-surface);
}
.browser-bar{ display:flex; gap:6px; padding:11px 14px; background: var(--color-bg-alt); border-bottom:1px solid var(--color-border); }
.browser-bar span{ width:9px; height:9px; border-radius:50%; background: var(--color-border); }
.browser-screen{ position:relative; aspect-ratio: 4/3; }
.browser-screen img{ width:100%; height:100%; object-fit:cover; }
.browser-overlay-card{
  position:absolute; left:16px; bottom:16px; right:16px;
  background: var(--color-surface); border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:12px; box-shadow: var(--shadow-pop);
}
.browser-overlay-card div{ display:flex; flex-direction:column; }
.browser-overlay-card strong{ font-size:13.5px; }
.browser-overlay-card span{ font-size:11.5px; color: var(--color-text-muted); }

/* ---- Trust bar ---- */
.trust-bar{ text-align:center; }
.trust-quote{ font: 600 17px/1.5 var(--font-display); color: var(--color-text-soft); max-width:520px; margin-inline:auto; }
.trust-stats{ display:flex; justify-content:center; gap:40px; margin-top:24px; flex-wrap:wrap; }
.trust-stats > div{ font-size:14px; color: var(--color-text-muted); }
.trust-stats strong{ font-size:24px; color: var(--color-primary); margin-right:2px; }

/* ---- Pain / solution ---- */
.pain-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width: 720px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--p-radius-lg);
  padding:22px; box-shadow: var(--shadow-card);
}
.pain-side{ display:flex; align-items:center; gap:8px; font:700 13px/1 var(--font-body); margin-bottom:10px; }
.pain-before{ color: var(--p-red-500); }
.pain-before svg{ width:18px; height:18px; }
.pain-after{ color: var(--color-secondary); }
.pain-after svg{ width:18px; height:18px; }
.pain-card p{ color: var(--color-text-soft); font-size:14.5px; }

/* ---- Pillars ---- */
.pillar-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--p-radius-lg);
  padding:26px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; gap:12px;
  transition: transform var(--p-duration-fast) var(--p-ease), box-shadow var(--p-duration-fast) var(--p-ease);
}
.pillar-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.pillar-card h4{ font-size:17px; }
.pillar-card p{ font-size:14px; color: var(--color-text-muted); }

/* ---- Timeline ---- */
.timeline{ position:relative; margin-top:24px; }
.timeline-svg{ width:100%; height:40px; display:block; }
.timeline-steps{ display:flex; justify-content:space-between; margin-top:-28px; gap:8px; }
.timeline-step{ display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; gap:10px; }
.step-num{
  width:40px; height:40px; border-radius:50%; background: var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font:800 15px/1 var(--font-display);
  box-shadow: var(--shadow-card); border:4px solid var(--color-bg);
}
.timeline-step h5{ font-size:13px; max-width:110px; }

/* ---- Portfolio preview ---- */
.portfolio-card{ position:relative; border-radius: var(--p-radius-lg); overflow:hidden; display:block; box-shadow: var(--shadow-card); aspect-ratio: 4/3; }
.portfolio-card img{ width:100%; height:100%; object-fit:cover; transition: transform var(--p-duration-normal) var(--p-ease); }
.portfolio-card:hover img{ transform: scale(1.06); }
.portfolio-overlay{
  position:absolute; inset:0; background: linear-gradient(to top, rgba(11,23,42,.78), transparent 55%);
  display:flex; align-items:flex-end; padding:18px; opacity:0; transition: opacity var(--p-duration-fast) var(--p-ease);
}
.portfolio-card:hover .portfolio-overlay{ opacity:1; }
.portfolio-overlay span{ color:#fff; font:700 14px/1 var(--font-body); }
.portfolio-tag{
  position:absolute; top:12px; left:12px; background: rgba(255,255,255,.92); color: var(--color-primary);
  font:700 11px/1 var(--font-body); padding:6px 11px; border-radius: var(--p-radius-full);
}

/* ---- Pricing preview ---- */
.price-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--p-radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:16px; position:relative;
}
.price-card.featured{ border-color: var(--color-primary); box-shadow: var(--shadow-lift); }
.price-badge{
  position:absolute; top:-13px; left:50%; transform: translateX(-50%);
  background: var(--gradient-brand); color:#fff; font:700 11.5px/1 var(--font-body);
  padding:6px 14px; border-radius: var(--p-radius-full);
}
.price-card h4{ font-size:19px; }
.price-tag{ font:700 15px/1 var(--font-body); color: var(--color-primary); }
.price-features{ display:flex; flex-direction:column; gap:10px; flex:1; }
.price-features li{
  font-size:13.5px; color: var(--color-text-soft); padding-left:24px; position:relative;
}
.price-features li::before{
  content:''; position:absolute; left:0; top:3px; width:16px; height:16px;
  background: var(--color-secondary); border-radius:50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- Testimonials ---- */
.testimonial-card{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--p-radius-lg);
  padding:26px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; gap:18px;
}
.testimonial-card p{ font: 500 15.5px/1.6 var(--font-display); color: var(--color-text-soft); }
.testimonial-author{ display:flex; flex-direction:column; }
.testimonial-author strong{ font-size:14px; }
.testimonial-author span{ font-size:12.5px; color: var(--color-text-muted); }

/* ---- FAQ ---- */
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--p-radius-md); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; background:none; border:none; text-align:left;
  font:600 15px/1.4 var(--font-body); color: var(--color-text);
}
.faq-icon{ width:18px; height:18px; color: var(--color-primary); transition: transform var(--p-duration-fast) var(--p-ease); flex-shrink:0; }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--p-duration-normal) var(--p-ease); }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding: 0 20px 18px; color: var(--color-text-muted); font-size:14px; line-height:1.6; }