/* ============================================================
   Adveerra — Service landing pages (SEO / SMM / Paid Ads)
   Pairs with blog.css (nav, footer, fx, .stat-strip, .article-cta)
   and site-fx.js (counters + scroll reveal). All classes sv-*
   to avoid collisions with shared styles.
   ============================================================ */

/* HERO */
.sv-hero{background:var(--indigo-deep);padding:6rem 6% 4.5rem;position:relative;overflow:hidden}
.sv-hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.sv-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(165,180,252,0.15);border:1px solid rgba(165,180,252,0.3);color:var(--accent);font-size:0.78rem;font-weight:500;padding:0.4rem 1rem;border-radius:50px;margin-bottom:1.5rem;letter-spacing:0.05em}
.sv-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sv-h1{font-family:'Poppins',sans-serif;font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;color:#fff;line-height:1.12;margin-bottom:1.25rem;max-width:760px}
.sv-h1 span{color:var(--accent)}
.sv-sub{font-size:1.08rem;font-weight:300;color:rgba(255,255,255,0.7);line-height:1.75;margin-bottom:2.25rem;max-width:620px}
.sv-btns{display:flex;gap:1rem;flex-wrap:wrap}
.sv-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--indigo-deep);font-family:'Poppins',sans-serif;font-weight:700;font-size:0.9rem;padding:0.85rem 2rem;border-radius:50px;transition:opacity 0.2s}
.sv-btn-primary:hover{opacity:0.88;color:var(--indigo-deep)}
.sv-btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:rgba(255,255,255,0.85);font-family:'Poppins',sans-serif;font-weight:600;font-size:0.9rem;padding:0.85rem 2rem;border-radius:50px;border:1px solid rgba(255,255,255,0.28);transition:border-color 0.2s,color 0.2s}
.sv-btn-outline:hover{border-color:rgba(255,255,255,0.7);color:#fff}

/* SECTIONS */
.sv-section{padding:5rem 6%}
.sv-wrap{max-width:1100px;margin:0 auto}
.sv-label{font-size:0.75rem;font-weight:600;letter-spacing:0.15em;color:var(--indigo);text-transform:uppercase;margin-bottom:0.75rem}
.sv-title{font-family:'Poppins',sans-serif;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;color:var(--text-dark);line-height:1.2;margin-bottom:1rem}
.sv-lead{font-size:1rem;color:var(--text-muted);line-height:1.75;max-width:640px;margin-bottom:2.5rem}
.sv-prose p{font-size:1.02rem;color:#2d2b50;line-height:1.85;margin-bottom:1.4rem;max-width:760px}
.sv-prose strong{color:var(--text-dark)}

/* FEATURE / DELIVERABLES GRID */
.sv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.sv-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:2rem;transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s}
.sv-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 16px 40px rgba(67,56,202,0.1)}
.sv-card-icon{width:52px;height:52px;background:var(--indigo-light);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.5rem}
.sv-card-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.1rem;color:var(--text-dark);margin-bottom:0.55rem}
.sv-card-desc{font-size:0.92rem;color:var(--text-muted);line-height:1.65}

/* CHECKLIST (what's included) */
.sv-included{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0.85rem 2rem}
.sv-check-item{display:flex;align-items:flex-start;gap:12px;font-size:0.98rem;color:var(--text-dark);line-height:1.5}
.sv-check{width:24px;height:24px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.72rem;margin-top:1px}

/* PROCESS STEPS */
.sv-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1rem}
.sv-step{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.75rem}
.sv-step-num{width:48px;height:48px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:1rem}
.sv-step-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:1rem;color:var(--text-dark);margin-bottom:0.45rem}
.sv-step-desc{font-size:0.88rem;color:var(--text-muted);line-height:1.6}

/* SECTION TINTS */
.sv-section.tint{background:var(--surface)}
.sv-section.dark{background:var(--indigo-deep)}
.sv-section.dark .sv-label{color:var(--accent)}
.sv-section.dark .sv-title{color:#fff}
.sv-section.dark .sv-lead{color:rgba(255,255,255,0.65)}

/* FAQ (native accordion — no JS needed) */
.sv-faq{max-width:820px;margin:0 auto}
.sv-faq-item{background:var(--white);border:1px solid var(--border);border-radius:14px;margin-bottom:1rem;overflow:hidden}
.sv-faq-item summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;color:var(--text-dark);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.sv-faq-item summary::-webkit-details-marker{display:none}
.sv-faq-item summary::after{content:'+';font-size:1.4rem;color:var(--indigo);font-weight:700;flex-shrink:0;transition:transform 0.25s}
.sv-faq-item[open] summary::after{transform:rotate(45deg)}
.sv-faq-item .sv-faq-a{padding:0 1.5rem 1.4rem;font-size:0.95rem;color:var(--text-muted);line-height:1.7}

/* BREADCRUMB (sits inside .sv-hero-inner, aligns with hero content) */
.sv-crumb{font-size:0.82rem;color:rgba(255,255,255,0.55);margin-bottom:1.5rem;line-height:1.5}
.sv-crumb a{color:rgba(255,255,255,0.85)}
.sv-crumb a:hover{color:#fff}

/* Ultrawide / 4K — keep hero + sections aligned with capped content */
@media(min-width:1400px){
  .sv-hero{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}
  .sv-section{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}
}

/* Tablet */
@media(max-width:860px){
  .sv-hero{padding:5rem 6% 3.5rem}
  .sv-section{padding:4rem 6%}
  .sv-h1{font-size:clamp(2rem,6vw,2.8rem)}
}

/* Phone */
@media(max-width:600px){
  .sv-hero{padding:4rem 6% 3rem}
  .sv-section{padding:3.25rem 6%}
  .sv-btns{flex-direction:column;align-items:stretch}
  .sv-btn-primary,.sv-btn-outline{justify-content:center}
  .sv-included{grid-template-columns:1fr;gap:0.85rem}
  .sv-faq-item summary{font-size:0.95rem;padding:1.1rem 1.25rem}
  .sv-card{padding:1.5rem}
}

/* Small phone */
@media(max-width:380px){
  .sv-h1{font-size:1.7rem}
  .sv-badge{font-size:0.7rem}
  .sv-crumb{font-size:0.75rem}
}