/* ============================================================
   NICHE-AWARE STYLESHEET — Digital Marketing Agency
   problem-pages.css — for Mode 4 problem pages only
   ============================================================ */

:root {
    --primary:     #5646E5;
    --secondary:   #9939ED;
    --accent:      #F0FDFA;
    --gold:        #D4AF37;
    --gold-secondary: #B8960C;
    --gold-text:   #7A5C00;
    --dark:        #0f172a;
    --text-dark:   #0f172a;
    --text-gray:   #64748b;
    --light-bg:    #f8fafc;
    --white:       #ffffff;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 25px rgba(0,0,0,0.1);
    --border-radius:   8px;
    --transition:      all 0.3s ease;
    --container-width: 1200px;
    --font-primary:    'Poppins', sans-serif;
    --font-secondary:  'Outfit', sans-serif;
    --hero-overlay:    rgba(20, 15, 60, 0.88);
    --sec0: #ffffff; --sec1: #f5f3ff; --sec2: #ffffff; --sec3: #f8fafc;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-secondary); color: var(--text-dark); line-height: 1.6; overflow-x: hidden; background: var(--white); }
h1, h2, h3 { font-family: var(--font-primary); }

#v360-wrapper .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; width: 100%; }

#v360-wrapper .section:nth-child(4n+1) { background: var(--sec0); }
#v360-wrapper .section:nth-child(4n+2) { background: var(--sec1); }
#v360-wrapper .section:nth-child(4n+3) { background: var(--sec2); }
#v360-wrapper .section:nth-child(4n+4) { background: var(--sec3); }
#v360-wrapper .section { padding: 60px 0; position: relative; }

#v360-wrapper .hero { position: relative; padding: 70px 0 90px; background-size: cover; background-position: center; color: white; min-height: 620px; display: flex; align-items: center; }
#v360-wrapper .hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
#v360-wrapper .hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; width: 100%; }
#v360-wrapper .hero-title { line-height: 1.1; margin-bottom: 20px; font-weight: 800; color: white; font-size: clamp(2rem, 5vw, 3.5rem); text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#v360-wrapper .hero-sub { font-size: 1.2rem; line-height: 1.5; margin-bottom: 25px; color: rgba(255,255,255,0.92); }

#v360-wrapper .hero.hv-centered_cta .hero-content { grid-template-columns: 1fr; text-align: center; max-width: 860px; margin: 0 auto; }
#v360-wrapper .hero.hv-centered_cta .text-col { width: 100%; }
#v360-wrapper .hero.hv-centered_cta .hero-gold-badge, #v360-wrapper .hero.hv-overlay_band .hero-gold-badge { margin-left: auto; margin-right: auto; }
#v360-wrapper .hero.hv-centered_cta .hero-features, #v360-wrapper .hero.hv-centered_cta .btn-group { justify-content: center; }

#v360-wrapper .hero.hv-left_form_wide .hero-content { grid-template-columns: 1fr; gap: 30px; }
#v360-wrapper .hero.hv-left_form_wide .form-col { width: 100%; }
#v360-wrapper .hero.hv-left_form_wide .glass-card { max-width: 100%; }
#v360-wrapper .hero.hv-left_form_wide .glass-card form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
#v360-wrapper .hero.hv-left_form_wide .glass-card form input, #v360-wrapper .hero.hv-left_form_wide .glass-card form select, #v360-wrapper .hero.hv-left_form_wide .glass-card form button { margin-bottom: 0; }
#v360-wrapper .hero.hv-left_form_wide .glass-card h3 { grid-column: 1 / -1; text-align: left; }

#v360-wrapper .hero.hv-overlay_band .hero-content { grid-template-columns: 1fr; text-align: center; max-width: 920px; margin: 0 auto; }
#v360-wrapper .hero.hv-overlay_band .hero-features, #v360-wrapper .hero.hv-overlay_band .btn-group { justify-content: center; }
#v360-wrapper .hero.hv-overlay_band .form-col { width: 100%; margin-top: 10px; }
#v360-wrapper .hero.hv-overlay_band .glass-card { max-width: 680px; margin: 0 auto; }

#v360-wrapper .hero-gold-badge { background: linear-gradient(135deg, var(--accent) 0%, #5646E5 100%); color: white; padding: 8px 22px; border-radius: 30px; font-weight: 700; display: inline-block; margin-bottom: 18px; font-size: 0.95rem; box-shadow: 0 4px 15px rgba(0,0,0,0.25); }

#v360-wrapper .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; font-family: var(--font-secondary); font-size: 1rem; }
#v360-wrapper .btn-primary { background: #5646E5; color: white; box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
#v360-wrapper .btn-primary:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
#v360-wrapper .btn-accent { background: #F0FDFA; color: #5646E5; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }

#v360-wrapper .glass-card { background: rgba(255,255,255,0.14); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.28); padding: 32px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
#v360-wrapper .glass-card h3 { margin-bottom: 20px; color: white; font-size: 1.45rem; text-align: center; font-family: var(--font-primary); }
#v360-wrapper .glass-card input, #v360-wrapper .glass-card select { width: 100%; padding: 13px 16px; margin-bottom: 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.92); font-size: 0.97rem; color: var(--text-dark); font-family: var(--font-secondary); }
#v360-wrapper .glass-card button { width: 100%; padding: 15px; background: #5646E5; color: white; border: none; border-radius: 10px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: var(--font-secondary); }
#v360-wrapper .glass-card button:hover { filter: brightness(1.12); transform: translateY(-2px); }

#v360-wrapper .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
#v360-wrapper .service-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; border-top: 3px solid #5646E5; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; will-change: transform; }
#v360-wrapper .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.11); }
#v360-wrapper .service-card-img { height: 200px; overflow: hidden; }
#v360-wrapper .service-card-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; transition: transform 0.5s ease; }
#v360-wrapper .zigzag-img-wrap { aspect-ratio: 4/3; min-height: unset; }
#v360-wrapper .service-card:hover img { transform: scale(1.05); }
#v360-wrapper .service-card-content { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
#v360-wrapper .service-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: #5646E5; font-family: var(--font-primary); }
#v360-wrapper .service-card p, #v360-wrapper .v360-desc-text { color: var(--text-gray); margin-bottom: 18px; flex-grow: 1; font-size: 0.96rem; line-height: 1.65; }

#v360-wrapper .service-card.cv-icon_left { flex-direction: row; align-items: flex-start; gap: 18px; padding: 26px; }
#v360-wrapper .service-card.cv-icon_left .cv-icon-box { flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, #F0FDFA 0%, #5646E5 100%); display: flex; align-items: center; justify-content: center; color: white; }
#v360-wrapper .service-card.cv-icon_left .service-card-content { padding: 0; }

#v360-wrapper .service-card.cv-minimal_border { box-shadow: none; border: 1px solid #e2e8f0; border-radius: 10px; }
#v360-wrapper .service-card.cv-minimal_border:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #5646E5; transform: translateY(-4px); }
#v360-wrapper .service-card.cv-minimal_border .service-card-img { height: 170px; }

#v360-wrapper .infographic-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px; margin-top: 40px; }
#v360-wrapper .infographic-item { background: white; border-radius: 18px; padding: 32px 24px; text-align: center; box-shadow: var(--shadow-lg); transition: all 0.4s ease; border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; }
#v360-wrapper .infographic-item:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
#v360-wrapper .infographic-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #F0FDFA 0%, #5646E5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.8rem; color: white; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
#v360-wrapper .infographic-number { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #5646E5 0%, #9939ED 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; font-family: var(--font-primary); }
#v360-wrapper .infographic-item h4 { margin: 10px 0 12px; color: var(--text-dark); font-size: 1.25rem; font-family: var(--font-primary); }

#v360-wrapper .zigzag-item { display: flex; align-items: center; gap: 50px; margin-bottom: 40px; padding: 28px 32px; border-radius: 16px; background: #5646E50d; border-left: 4px solid #5646E5; }
#v360-wrapper .zigzag-item.reverse { flex-direction: row-reverse; background: #9939ED0d; border-left: none; border-right: 4px solid #9939ED; }
#v360-wrapper .zigzag-content, #v360-wrapper .zigzag-img-wrap { flex: 1; }
#v360-wrapper .zigzag-bullets { list-style: none; padding: 0; margin: 0 0 16px 0; }
#v360-wrapper .zigzag-bullets li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 1rem; color: var(--text-dark); line-height: 1.6; }
#v360-wrapper .zigzag-bullets li .zb-check { color: #5646E5; font-weight: 700; font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
#v360-wrapper .zigzag-item.reverse .zigzag-bullets li .zb-check { color: #9939ED; }
#v360-wrapper .zigzag-img { width: 100%; border-radius: 18px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); height: auto; min-height: 320px; max-height: 500px; object-fit: cover; transition: transform 0.5s ease; display: block; }
#v360-wrapper .zigzag-img-wrap { display: flex; align-items: stretch; }
#v360-wrapper .zigzag-img:hover { transform: scale(1.02); }
#v360-wrapper .zigzag-content h3 { font-size: 1.9rem; margin-bottom: 20px; color: #5646E5; font-family: var(--font-primary); }

#v360-wrapper .faq-item { margin-bottom: 12px; background: white; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: var(--shadow-sm); }
#v360-wrapper .faq-question { padding: 22px 24px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; font-size: 1.05rem; font-family: var(--font-primary); }
#v360-wrapper .faq-answer { padding: 0 24px 22px; display: none; color: var(--text-gray); border-top: 1px solid #f1f5f9; padding-top: 18px; line-height: 1.8; }

#v360-wrapper .review-card { background: white; padding: 28px; border-radius: 14px; margin-bottom: 20px; border-left: 5px solid #5646E5; box-shadow: var(--shadow-sm); }

#v360-wrapper .site-footer { background: #1e293b; color: white; padding: 60px 0 20px; }
#v360-wrapper .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: 40px; margin-bottom: 40px; }

#v360-wrapper .internal-links-section { background: linear-gradient(135deg, #5646E508 0%, white 100%); border-radius: 20px; padding: 40px; margin: 40px 0; border: 1px solid #5646E522; }
#v360-wrapper .internal-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

#v360-wrapper .pill-container { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
#v360-wrapper .pill { background: white; border: 1px solid #e2e8f0; padding: 10px 22px; border-radius: 50px; font-size: 0.9rem; color: var(--text-gray); transition: all 0.3s; font-weight: 500; }
#v360-wrapper .pill:hover { background: #5646E5; color: white; border-color: #5646E5; transform: translateY(-2px); }

@media (max-width: 991px) {
    #v360-wrapper .footer-grid { grid-template-columns: repeat(2, 1fr); }
    #v360-wrapper .service-grid, #v360-wrapper .infographic-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
    #v360-wrapper .hero { padding: 40px 0 60px; min-height: auto; }
    #v360-wrapper .hero-content { display: flex !important; flex-direction: column !important; gap: 0 !important; }
    #v360-wrapper .text-col { order: 1 !important; width: 100% !important; text-align: center !important; margin-bottom: 28px !important; }
    #v360-wrapper .form-col { order: 2 !important; width: 100% !important; display: block !important; visibility: visible !important; }
    #v360-wrapper .glass-card { margin: 0 auto !important; width: 100% !important; padding: 22px 18px !important; box-sizing: border-box !important; }
    #v360-wrapper .hero-title { text-align: center !important; font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
    #v360-wrapper .hero-sub { text-align: center !important; }
    #v360-wrapper .hero-gold-badge { margin: 0 auto 14px auto !important; display: table !important; }
    #v360-wrapper .hero-features, #v360-wrapper .btn-group { justify-content: center !important; }
    #v360-wrapper .zigzag-item, #v360-wrapper .zigzag-item.reverse { flex-direction: column !important; gap: 20px !important; margin-bottom: 20px !important; padding: 20px 18px !important; border-right: none !important; border-left: 4px solid #5646E5 !important; }
    #v360-wrapper .zigzag-img { height: auto !important; min-height: 200px !important; max-height: 280px !important; }
    #v360-wrapper .service-grid, #v360-wrapper .infographic-grid, #v360-wrapper .footer-grid { grid-template-columns: 1fr !important; }
    #v360-wrapper .service-card.cv-icon_left { flex-direction: row !important; }
    #v360-wrapper .section { padding: 28px 0 !important; }
    #v360-wrapper .container { padding: 0 14px !important; }
}
@media (max-width: 480px) {
    #v360-wrapper .hero-title { font-size: 1.75rem !important; }
    #v360-wrapper .zigzag-content h3 { font-size: 1.4rem !important; }
    #v360-wrapper .infographic-number { font-size: 2rem; }
}


/* ==========================================================
   Mode 4 cluster — rules this sheet was missing.
   hero-cta-main/sub had no rule at all, so Call Now and WhatsApp
   rendered as plain inline text instead of buttons. Same variable
   names this file already defines, so the Mode 4 palette is kept.
   ========================================================== */

#v360-wrapper .hero-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

#v360-wrapper .hero-cta-main { display: inline-flex; align-items: center; gap: 9px; background: var(--primary); color: #fff; padding: 15px 34px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; }

#v360-wrapper .hero-cta-sub { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 15px 30px; border-radius: 50px; font-weight: 700; text-decoration: none; }

/* diagonal_split: asli tirchi line — heading TOP-LEFT, form BOTTOM-RIGHT,
   accent diagonal band overlay ke andar (hard-stop gradient = crisp line) */
#v360-wrapper .hero.hv-diagonal_split .hero-overlay {
    background: linear-gradient(115deg,
        rgba(15,23,42,.96) 0%, rgba(15,23,42,.93) 51.5%,
        var(--accent) 51.5%, var(--accent) 52.3%,
        rgba(15,23,42,.30) 52.3%, rgba(15,23,42,.12) 100%);
}

#v360-wrapper .hero.hv-diagonal_split { min-height: 680px; }

#v360-wrapper .hero.hv-diagonal_split .hero-content { align-items: stretch; }

#v360-wrapper .hero.hv-diagonal_split .text-col {
    max-width: 560px;
    align-self: flex-start;
    padding-bottom: 90px;
}

#v360-wrapper .hero.hv-diagonal_split .form-col {
    align-self: flex-end;
    margin-top: 110px;
}

#v360-wrapper .hero.hv-diagonal_split .glass-card {
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

#v360-wrapper .hero-cta-row.hero-cta-left { justify-content: flex-start; margin-top: 20px; }

@media (max-width: 768px) {
    #v360-wrapper .hero.hv-diagonal_split .text-col { padding-bottom: 20px; }
    #v360-wrapper .hero.hv-diagonal_split .form-col { margin-top: 10px; }
    #v360-wrapper .hero.hv-diagonal_split .hero-overlay {
        background: linear-gradient(160deg, rgba(15,23,42,.95) 0%, rgba(15,23,42,.88) 100%);
    }
}

#v360-wrapper .di-float-badge {
    position: absolute; top: -18px; right: -10px; z-index: 5;
    background: linear-gradient(135deg, var(--accent), #4f46e5);
    color: #fff; border-radius: 14px; padding: 10px 16px; text-align: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    animation: di-float 4s ease-in-out infinite;
}

#v360-wrapper .di-float-badge .dfb-num { display: block; font-family: var(--font-primary); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }

#v360-wrapper .di-float-badge .dfb-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; opacity: .92; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { #v360-wrapper .di-float-badge { animation: none; } }

@media (max-width: 768px) { #v360-wrapper .di-float-badge { right: 4px; top: -14px; } }