/*
 * Shani Finserve — SEO Landing Page Styles v2.0
 * Premium fintech design system for programmatic city-service pages.
 * Target quality: Groww / CRED / Zerodha / INDmoney
 */

/* ═══ HERO ═══════════════════════════════════════════════ */
.seo-hero { position:relative; padding:140px 0 80px; overflow:hidden; min-height:520px; display:flex; align-items:center; }
.seo-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.25) 100%); pointer-events:none; }
.seo-hero .container { position:relative; z-index:2; }

.seo-breadcrumb { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:20px; flex-wrap:wrap; }
.seo-breadcrumb a { color:rgba(255,255,255,.75); text-decoration:none; transition:.2s; }
.seo-breadcrumb a:hover { color:#fff; }
.seo-breadcrumb .active { color:rgba(255,255,255,.9); }

.seo-hero-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(32px,5vw,52px); font-weight:800; color:#fff; line-height:1.15; margin-bottom:16px; letter-spacing:-.02em; }
.seo-hero-subtitle { font-size:17px; color:rgba(255,255,255,.8); line-height:1.6; max-width:540px; margin-bottom:24px; }

.seo-hero-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.seo-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15); border-radius:50px; padding:8px 16px; font-size:13px; font-weight:600; color:#fff; }
.seo-badge i { font-size:14px; color:rgba(255,255,255,.9); }

.seo-hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

/* Hero Visual Card */
.seo-hero-card { background:rgba(255,255,255,.12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.18); border-radius:24px; padding:32px 28px; color:#fff; }
.seo-hero-card-icon { width:56px; height:56px; background:rgba(255,255,255,.15); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.seo-hero-card-icon i { font-size:24px; }
.seo-hero-card h3 { font-size:20px; font-weight:700; margin-bottom:20px; }
.seo-hero-card-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:14px; }
.seo-hero-card-row span { color:rgba(255,255,255,.65); }
.seo-hero-card-row strong { color:#fff; }
.seo-hero-card-row:last-of-type { border-bottom:none; }

/* ═══ BUTTONS ════════════════════════════════════════════ */
.seo-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:12px; font-size:15px; font-weight:600; text-decoration:none; transition:var(--sf-transition); cursor:pointer; border:none; line-height:1; }
.seo-btn-primary { background:linear-gradient(135deg,var(--sf-accent),var(--sf-primary-light)); color:#fff; box-shadow:0 4px 16px rgba(35,219,224,.3); }
.seo-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(35,219,224,.4); color:#fff; }
.seo-btn-whatsapp { background:#25d366; color:#fff; }
.seo-btn-whatsapp:hover { background:#1fbd5a; transform:translateY(-2px); color:#fff; }
.seo-btn-outline { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:#fff; }
.seo-btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; }

/* ═══ SECTIONS ═══════════════════════════════════════════ */
.seo-section { padding:80px 0; }
.seo-section-title { font-family:'Inter',system-ui,sans-serif; font-size:clamp(24px,3.5vw,36px); font-weight:800; color:var(--sf-primary); text-align:center; margin-bottom:48px; letter-spacing:-.02em; }

/* ═══ QUICK ANSWER (AI Search Block) ════════════════════ */
.seo-quick-answer { padding:0; margin-top:-40px; position:relative; z-index:3; }
.seo-answer-box { background:#fff; border-radius:20px; padding:28px 32px; box-shadow:0 8px 40px rgba(13,81,82,.08); border:1px solid var(--sf-border-soft); max-width:900px; margin:0 auto; }
.seo-answer-label { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,var(--sf-accent-glow),rgba(35,219,224,.08)); color:var(--sf-primary); padding:4px 14px; border-radius:50px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.seo-answer-label i { color:var(--sf-accent); }
.seo-answer-box p { font-size:15px; line-height:1.7; color:#444; margin:0; }

/* ═══ HIGHLIGHTS CARDS ══════════════════════════════════ */
.seo-highlights-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:48px; }
.seo-highlight-card { background:#fff; border:1px solid var(--sf-border-soft); border-radius:16px; padding:24px 20px; text-align:center; transition:var(--sf-transition); }
.seo-highlight-card:hover { transform:translateY(-4px); box-shadow:var(--sf-shadow-hover); border-color:var(--sf-accent); }
.seo-highlight-card i { font-size:28px; color:var(--sf-accent); display:block; margin-bottom:8px; }
.seo-highlight-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--sf-text-muted); margin-bottom:4px; }
.seo-highlight-value { font-size:15px; font-weight:700; color:var(--sf-primary); }

/* ═══ CONTENT BLOCKS ════════════════════════════════════ */
.seo-content-block { margin-bottom:48px; }
.seo-content-block h2 { font-family:'Inter',system-ui,sans-serif; font-size:clamp(22px,3vw,28px); font-weight:800; color:var(--sf-primary); margin-bottom:16px; letter-spacing:-.01em; }
.seo-content-block p { font-size:15px; line-height:1.8; color:#555; margin-bottom:12px; }

/* Benefits Grid */
.seo-benefits-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.seo-benefit-item { display:flex; align-items:flex-start; gap:16px; background:var(--sf-bg-soft); border-radius:12px; padding:16px 20px; transition:var(--sf-transition); }
.seo-benefit-item:hover { background:#fff; box-shadow:var(--sf-shadow-card); }
.seo-benefit-num { flex-shrink:0; width:32px; height:32px; background:linear-gradient(135deg,var(--sf-accent),var(--sf-primary-light)); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; }
.seo-benefit-item p { font-size:14px; color:#444; margin:0; line-height:1.5; }

/* Checklist */
.seo-checklist { display:grid; gap:10px; }
.seo-check-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border:1px solid var(--sf-border-soft); border-radius:12px; font-size:14px; color:#444; transition:var(--sf-transition); }
.seo-check-item:hover { border-color:var(--sf-accent); }
.seo-check-item i { color:#10b981; font-size:18px; flex-shrink:0; }

/* Documents Grid */
.seo-docs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.seo-doc-item { display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--sf-bg-soft); border-radius:12px; font-size:14px; color:var(--sf-primary); font-weight:500; }
.seo-doc-item i { color:var(--sf-accent); font-size:18px; }

/* Steps */
.seo-steps { display:grid; gap:0; }
.seo-step { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid var(--sf-border-soft); }
.seo-step:last-child { border-bottom:none; }
.seo-step-num { flex-shrink:0; width:48px; height:48px; background:linear-gradient(135deg,var(--sf-accent),var(--sf-primary-light)); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; }
.seo-step-content h4 { font-size:16px; font-weight:700; color:var(--sf-primary); margin-bottom:4px; }
.seo-step-content p { font-size:14px; color:#666; margin:0; line-height:1.6; }

/* Expert Insight */
.seo-insight-box { display:flex; gap:20px; background:linear-gradient(135deg,rgba(13,81,82,.04),rgba(35,219,224,.04)); border:1px solid var(--sf-border-soft); border-radius:20px; padding:28px; margin-bottom:48px; }
.seo-insight-avatar { flex-shrink:0; width:48px; height:48px; background:var(--sf-primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; }
.seo-insight-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sf-accent); margin-bottom:8px; }
.seo-insight-box p { font-size:14px; line-height:1.7; color:#555; margin:0 0 8px; font-style:italic; }
.seo-insight-box strong { font-size:13px; color:var(--sf-primary); }

/* ═══ SIDEBAR ═══════════════════════════════════════════ */
.seo-sidebar { position:sticky; top:100px; display:grid; gap:20px; }
.seo-sidebar-card { background:#fff; border:1px solid var(--sf-border-soft); border-radius:20px; padding:28px 24px; box-shadow:var(--sf-shadow-card); }
.seo-sidebar-card h5 { font-size:15px; font-weight:700; color:var(--sf-primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.seo-sidebar-card h5 i { color:var(--sf-accent); }
.seo-sidebar-cta { background:linear-gradient(135deg,rgba(13,81,82,.03),rgba(35,219,224,.05)); border-color:rgba(35,219,224,.15); }
.seo-sidebar-icon { width:48px; height:48px; background:linear-gradient(135deg,var(--sf-accent),var(--sf-primary-light)); color:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.seo-sidebar-cta h4 { font-size:18px; font-weight:700; color:var(--sf-primary); margin-bottom:8px; }
.seo-sidebar-cta p { font-size:13px; color:var(--sf-text-muted); margin-bottom:20px; }

/* Sidebar Facts */
.seo-sidebar-facts { display:grid; gap:0; }
.seo-fact { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--sf-border-soft); font-size:13px; }
.seo-fact:last-child { border-bottom:none; }
.seo-fact span { color:var(--sf-text-muted); }
.seo-fact strong { color:var(--sf-primary); }

/* Contact Lines */
.seo-contact-line { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; color:var(--sf-primary); text-decoration:none; transition:.2s; }
.seo-contact-line:hover { color:var(--sf-accent); }
.seo-contact-line i { color:var(--sf-accent); font-size:16px; }

/* Tool Links */
.seo-tool-link { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:6px; background:var(--sf-bg-soft); border-radius:10px; font-size:13px; font-weight:600; color:var(--sf-primary); text-decoration:none; transition:var(--sf-transition); }
.seo-tool-link:hover { background:var(--sf-accent-glow); transform:translateX(4px); color:var(--sf-primary); }
.seo-tool-link i { color:var(--sf-accent); font-size:16px; }

/* ═══ FAQ ════════════════════════════════════════════════ */
.seo-faq-section { background:var(--sf-bg-soft); }
.seo-faq-list { display:grid; gap:12px; }
.seo-faq-item { background:#fff; border:1px solid var(--sf-border-soft); border-radius:16px; overflow:hidden; transition:var(--sf-transition); }
.seo-faq-item[open] { border-color:var(--sf-accent); box-shadow:0 4px 20px rgba(35,219,224,.08); }
.seo-faq-item summary { padding:20px 24px; font-size:15px; font-weight:600; color:var(--sf-primary); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.seo-faq-item summary::-webkit-details-marker { display:none; }
.seo-faq-item summary::after { content:'+'; font-size:20px; font-weight:300; color:var(--sf-accent); transition:.3s; }
.seo-faq-item[open] summary::after { content:'−'; }
.seo-faq-answer { padding:0 24px 20px; }
.seo-faq-answer p { font-size:14px; line-height:1.7; color:#555; margin:0; }

/* ═══ RELATED SERVICES GRID ═════════════════════════════ */
.seo-related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.seo-related-card { background:#fff; border:1px solid var(--sf-border-soft); border-radius:20px; padding:28px 24px; text-decoration:none; transition:var(--sf-transition); position:relative; overflow:hidden; display:block; }
.seo-related-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--sf-accent),var(--sf-primary)); opacity:0; transition:.3s; }
.seo-related-card:hover { transform:translateY(-6px); box-shadow:var(--sf-shadow-hover); }
.seo-related-card:hover::before { opacity:1; }
.seo-related-card i { font-size:32px; color:var(--sf-primary); margin-bottom:12px; display:block; }
.seo-related-card h5 { font-size:16px; font-weight:700; color:var(--sf-primary); margin-bottom:6px; }
.seo-related-card p { font-size:13px; color:var(--sf-text-muted); margin-bottom:12px; line-height:1.5; }
.seo-card-arrow { font-size:13px; font-weight:600; color:var(--sf-accent); }

/* ═══ CITY TAGS ═════════════════════════════════════════ */
.seo-cities-section { background:var(--sf-bg-soft); }
.seo-cities-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.seo-city-tag { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; background:#fff; border:1px solid var(--sf-border-soft); border-radius:50px; font-size:13px; font-weight:500; color:var(--sf-primary); text-decoration:none; transition:var(--sf-transition); }
.seo-city-tag:hover { background:var(--sf-accent-glow); border-color:var(--sf-accent); transform:translateY(-2px); color:var(--sf-primary); }
.seo-city-tag i { color:var(--sf-accent); font-size:14px; }

/* ═══ CTA BAND ══════════════════════════════════════════ */
.seo-cta-band { position:relative; overflow:hidden; }
.seo-cta-band::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 100%); }
.seo-cta-band .container { position:relative; z-index:2; }

/* ═══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:992px) {
    .seo-hero { padding:120px 0 60px; min-height:auto; }
    .seo-hero-title { font-size:clamp(28px,5vw,40px); }
    .seo-sidebar { position:static; margin-top:40px; }
    .seo-section { padding:60px 0; }
    .d-none.d-lg-block { display:none !important; }
}
@media (max-width:768px) {
    .seo-hero { padding:100px 0 50px; }
    .seo-hero-ctas { flex-direction:column; }
    .seo-btn { width:100%; justify-content:center; }
    .seo-highlights-grid { grid-template-columns:repeat(2,1fr); }
    .seo-related-grid { grid-template-columns:1fr; }
    .seo-answer-box { padding:20px; margin-left:12px; margin-right:12px; }
    .seo-insight-box { flex-direction:column; }
    .seo-docs-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .seo-highlights-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .seo-highlight-card { padding:16px 12px; }
    .seo-hero-badges { gap:6px; }
    .seo-badge { font-size:11px; padding:6px 12px; }
}