/* Landing Page Styles (Stripe-inspired hero + cohesive flow) */
:root {
	/* QSavvy Blue + Orange */
	--qs-indigo-50:#eff6ff;
	--qs-indigo-100:#dbeafe;
	--qs-indigo-200:#bfdbfe;
	--qs-indigo-700:#1d4ed8;
	--qs-indigo-800:#1e40af;
	--qs-indigo-900:#1e3a8a;
	--qs-slate-900:#0f172a;
	--qs-slate-800:#1e293b;
	--qs-slate-700:#334155;
	--qs-slate-50:#f8fafc;
	--qs-warning:#f59e0b;
}

/* Global layout has top padding for the fixed header; landing page hides that header. */
body.lp-no-header{ padding-top: 0 !important; }

/* Page wrapper keeps styling scoped */
.lp-page{
	--lp-bg:#f8fbff;
	--lp-surface:#ffffff;
	--lp-surface-2:rgba(255,255,255,.72);
	--lp-border:rgba(15,23,42,.10);
	--lp-text:var(--qs-slate-900);
	--lp-muted:rgba(15,23,42,.68);
	--lp-shadow:0 12px 36px -18px rgba(2,6,23,.30);
	background:var(--lp-bg);
	color:var(--lp-text);
}

/* Utility helpers */
.text-blue-900 { color: var(--qs-indigo-900) !important; }
.text-blue-800 { color: var(--qs-indigo-800) !important; }
.bg-blue-50 { background: var(--qs-indigo-50) !important; }
.text-teal { color:#0ea5a4 !important; }
.border-teal { border-color:#0ea5a4 !important; }
.text-gradient { background:linear-gradient(90deg,var(--qs-indigo-900),var(--qs-indigo-700),var(--qs-warning)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Hero */
.lp-hero{
	position:relative;
	overflow:hidden;
	padding-bottom: 6.0rem;
}
.lp-hero-bg{
	position:absolute;
	/* Bigger diagonal background to cover taller hero content */
	inset:-68% -30% auto -30%;
	height: 1420px;
	transform: rotate(-10deg);
	border-radius: 80px;
	overflow:hidden;
	pointer-events: none;
	background-color: var(--qs-indigo-50);
	filter: none;
	clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
}


.lp-hero-bg > picture{
	display:block;
	width:100%;
	height:100%;
}

.lp-hero-bg > picture > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

/* Pricing page: make the diagonal color field larger/more visible without changing the main landing page. */
.lp-hero--pricing .lp-hero-bg{
	/* Pull the slab down and enlarge so more of it is visible behind the pricing content */
	inset: -43% -28% auto -28%;
	height: 1940px;
	clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}

/* Integrated nav */
.lp-brand{ display:inline-flex; align-items:center; gap:.65rem; color:var(--lp-text); }
.lp-brand-mark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:63px;
	height:63px;
	border-radius:12px;
	background:rgba(30,58,138,.10);
	color:var(--qs-indigo-900);
	font-weight:800;
	font-size: 1.65rem;
}
.lp-brand-name{ font-weight:800; letter-spacing:.2px; font-size: 1.725rem; }

@media (max-width: 575.98px){
	.lp-brand{ gap:.55rem; }
	.lp-brand-mark{ width:54px; height:54px; font-size: 1.45rem; }
	.lp-brand-name{ font-size: 1.55rem; }
}
.lp-nav-link{ color:rgba(15,23,42,.72); text-decoration:none; font-weight:600; }
.lp-nav-link:hover{ color:rgba(15,23,42,.92); text-decoration:none; }

.lp-eyebrow{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	padding:.35rem .65rem;
	border-radius:999px;
	background:var(--lp-surface-2);
	border:1px solid var(--lp-border);
	color:rgba(15,23,42,.78);
	font-size:.85rem;
	font-weight:700;
}

/* Buttons (solid, consistent) */
.lp-btn{
	border-radius: .85rem;
	padding: .7rem 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 44px;
}
.lp-btn.btn-sm{ min-height: 36px; padding:.45rem .75rem; border-radius:.75rem; }
.lp-btn.btn-lg{ min-height: 52px; padding:.9rem 1.2rem; border-radius:1rem; }

.lp-btn-primary{
	background: var(--qs-warning);
	border: 1px solid rgba(0,0,0,.04);
	color:#0b1b34;
	box-shadow: 0 10px 22px -14px rgba(245,158,11,.65);
}
.lp-btn-primary:hover{ background:#d97706; border-color:#d97706; color:#0b1b34; }

.lp-btn-secondary{
	background: rgba(15,23,42,.92);
	border: 1px solid rgba(15,23,42,.92);
	color:#fff;
	box-shadow: var(--lp-shadow);
}
.lp-btn-secondary:hover{ background: rgba(15,23,42,.98); border-color: rgba(15,23,42,.98); color:#fff; }

.lp-btn-tertiary{
	background: rgba(30,58,138,.08);
	border: 1px solid rgba(30,58,138,.12);
	color: var(--qs-indigo-900);
}
.lp-btn-tertiary:hover{ background: rgba(30,58,138,.12); border-color: rgba(30,58,138,.18); color: var(--qs-indigo-900); }

/* Small offer text in hero */
.lp-offer{
	color: rgba(15,23,42,.72);
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.35;
}

.lp-offer .fw-semibold{
	color: #000000da;
	font-weight: 900;
	letter-spacing: .04em;
	text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.lp-offer strong{
	color: #000000da;
	font-weight: 900;
}

/* Hero panel */
.lp-hero-panel{
	background: rgba(255,255,255,.72);
	border: 1px solid var(--lp-border);
	border-radius: 1.25rem;
	box-shadow: var(--lp-shadow);
	overflow:hidden;
}
@media (min-width: 992px){
	/* Drop the panel down ~3cm on typical desktop viewports */
	.lp-hero-panel{ margin-top: 110px; }
}
.lp-hero-panel-head{ padding: 1rem 1.1rem .85rem; border-bottom:1px solid var(--lp-border); }
.lp-hero-panel-body{ padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:.85rem; }
.lp-hero-panel-foot{ padding: .85rem 1.1rem; border-top:1px solid var(--lp-border); }
.lp-kpi-label{ font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:rgba(15,23,42,.55); }
.lp-kpi-value{ font-weight:700; color:rgba(15,23,42,.88); }

/* Chips */
.lp-chip{
	background: rgba(15,23,42,.06);
	border: 1px solid rgba(30,58,138,.18);
	border-radius: 1rem;
	padding: .9rem;
	box-shadow: 0 14px 30px -24px rgba(2,6,23,.45);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.lp-chip-title{ font-weight:800; font-size:.92rem; color: rgba(15,23,42,.92); }
.lp-chip-text{ color: rgba(15,23,42,.74); font-size:.85rem; margin-top:.15rem; }

/* Hero feature chips: match the lp-metric color + fade */
.lp-hero .lp-chip{
	background:
		radial-gradient(circle at 22% 22%, rgba(56,189,248,.35), transparent 58%),
		linear-gradient(135deg, rgba(29,78,216,.42) 0%, rgba(56,189,248,.20) 100%);
	border-color: rgba(29,78,216,.40);
	box-shadow: 0 14px 32px -26px rgba(29,78,216,.28);
}

.lp-hero .lp-chip-title{ color: rgba(15,23,42,.92); }
.lp-hero .lp-chip-text{ color: rgba(15,23,42,.74); }

/* Sections */
.lp-section{ padding: 4rem 0; }
.lp-section-alt{ background: linear-gradient(180deg, rgba(29,78,216,.05), rgba(245,158,11,.04)); }
.lp-section-white{ background:#ffffff; }

/* Dark panel wrapper (over white page background) */
.lp-dark-panel{
	background:
		radial-gradient(circle at 58% 78%, rgba(56,189,248,.18), transparent 62%),
		radial-gradient(circle at 92% 62%, rgba(59,130,246,.16), transparent 62%),
		radial-gradient(circle at 14% 22%, rgba(29,78,216,.14), transparent 60%),
		linear-gradient(160deg, #12335f 0%, #17467f 42%, #1c5aa3 72%, #1d4ed8 88%, #12335f 100%);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 1.75rem;
	padding: 2rem 1.5rem;
	box-shadow: 0 18px 46px -30px rgba(2,6,23,.38);
	position: relative;
	overflow: hidden;
}

/* FAQ plate (dark translucent grey, no fade) */
.lp-faq-plate{
	background: rgba(2,6,23,.93);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 1.75rem;
	padding: 2rem 1.5rem;
	box-shadow: 0 18px 50px -28px rgba(2,6,23,.60);
}

.lp-faq-plate h2{ color: rgba(255,255,255,.96); }

.lp-faq-plate .accordion-item{
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 1rem;
	overflow: hidden;
}

.lp-faq-plate .accordion-item + .accordion-item{ margin-top: .75rem; }

.lp-faq-plate .accordion-button{
	background: transparent;
	color: rgba(255,255,255,.92);
	font-weight: 800;
}

.lp-faq-plate .accordion-button:not(.collapsed){
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.98);
}

.lp-faq-plate .accordion-button:focus{
	box-shadow: 0 0 0 .15rem rgba(56,189,248,.22);
}

.lp-faq-plate .accordion-body{
	color: rgba(255,255,255,.80);
}

.lp-faq-plate .accordion-body strong{ color: rgba(255,255,255,.92); }

.lp-faq-plate a{ color: rgba(147,197,253,.95); }
.lp-faq-plate a:hover{ color: rgba(191,219,254,.98); }

.lp-dark-panel > *{ position: relative; }
.lp-dark-panel h2,
.lp-dark-panel h5{ color: rgba(255,255,255,.96); }
.lp-dark-panel .text-muted{ color: rgba(255,255,255,.72) !important; }
.lp-dark-panel .lp-card{
	background: rgba(15,23,42,.62);
	border-color: rgba(255,255,255,.14);
	box-shadow: 0 16px 40px -28px rgba(2,6,23,.70);
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Equal-height cards within the dark panel grid */

/* Equal-height cards within the dark panel grid (scoped) */
.lp-dark-panel .lp-dark-card-grid > [class^="col-"]{
	display: flex;
}

.lp-dark-panel .lp-card:hover{
	transform: translateY(-3px);
	border-color: rgba(96,165,250,.35);
	box-shadow: 0 20px 50px -30px rgba(2,6,23,.78);
}

.lp-dark-panel .lp-card .text-muted{
	color: rgba(255,255,255,.78) !important;
}

.lp-dark-panel .lp-card strong{
	color: rgba(255,255,255,.94);
}

@media (min-width: 992px){
	.lp-dark-panel{ padding: 2.25rem 2rem; }
}

/* Feature cards */
.lp-card{
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: 1.25rem;
	padding: 1.2rem 1.15rem;
	box-shadow: 0 10px 26px -20px rgba(2,6,23,.32);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lp-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(2,6,23,.40); border-color: rgba(30,58,138,.20); }
.lp-card-icon{
	width:44px; height:44px;
	display:flex; align-items:center; justify-content:center;
	border-radius: 14px;
	background: rgba(30,58,138,.10);
	color: var(--qs-indigo-900);
	margin-bottom: .75rem;
	font-size: 1.2rem;
}

/* ROI metrics */
.lp-metric{
	background:
		radial-gradient(circle at 22% 22%, rgba(56,189,248,.35), transparent 58%),
		linear-gradient(135deg, rgba(29,78,216,.42) 0%, rgba(56,189,248,.20) 100%);
	border: 1px solid rgba(29,78,216,.40);
	border-radius: 1rem;
	padding: 1rem;
	box-shadow: 0 14px 32px -26px rgba(29,78,216,.28);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lp-metric:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px -30px rgba(29,78,216,.34); border-color: rgba(56,189,248,.62); }
.lp-metric-value{ font-weight:900; color: var(--qs-indigo-900); letter-spacing: .2px; }
.lp-metric-label{ color: rgba(15,23,42,.72); font-size: .85rem; margin-top:.15rem; }

/* Testimonials */
.lp-testimonial{
	padding: 1.1rem;
	height: 100%;
}

.lp-testimonial p{
	color: rgba(15,23,42,.86);
	font-size: .92rem;
	line-height: 1.45;
}

.lp-testimonial .text-muted{
	color: rgba(15,23,42,.72) !important;
}

/* FAQ (legacy, scoped to landing page only) */
.lp-page .accordion-item{ border: 1px solid var(--lp-border); border-radius: 1rem; overflow:hidden; }
.lp-page .accordion-item + .accordion-item{ margin-top: .75rem; }
.lp-page .accordion-button{ font-weight:800; }
.lp-page .accordion-button:not(.collapsed){ background: rgba(30,58,138,.06); color: var(--qs-indigo-900); }
.lp-page .accordion-button:focus{ box-shadow: 0 0 0 .15rem rgba(29,78,216,.22); }

/* Final CTA */
.lp-final{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
.lp-final-band{
	background:
		radial-gradient(circle at 18% 22%, rgba(56,189,248,.20), transparent 60%),
		radial-gradient(circle at 88% 78%, rgba(245,158,11,.22), transparent 62%),
		radial-gradient(circle at 60% 85%, rgba(29,78,216,.18), transparent 60%),
		linear-gradient(160deg, #12335f 0%, #17467f 44%, #1c5aa3 72%, #1d4ed8 86%, #12335f 100%);
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
	position: relative;
	overflow: hidden;
}

.lp-final-band::before{
	content:"";
	position:absolute;
	inset:-40% -20% auto -20%;
	height: 520px;
	background:
		radial-gradient(circle at 30% 40%, rgba(56,189,248,.22), transparent 55%),
		radial-gradient(circle at 70% 55%, rgba(29,78,216,.18), transparent 58%);
	pointer-events:none;
}

.lp-final-band > *{ position: relative; }

.lp-final-inner{
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 1.5rem;
	padding: 1.6rem 1.4rem;
	display:flex;
	flex-direction:column;
	gap: 1rem;
	box-shadow: 0 22px 60px -34px rgba(2,6,23,.55);
}

.lp-final-band .lp-final-inner .text-muted{ color: rgba(15,23,42,.72) !important; }

.lp-final-band .lp-final-foot{ color: rgba(255,255,255,.72) !important; }
.lp-final-band .lp-final-foot a{ color: rgba(147,197,253,.95); }
.lp-final-band .lp-final-foot a:hover{ color: rgba(191,219,254,.98); }
@media (min-width: 768px){
	.lp-final-inner{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ROI Calculator Modal (kept) */
.roi-modal .modal-header { background: linear-gradient(90deg,var(--qs-indigo-900),var(--qs-indigo-700)); color:#fff; }
.roi-modal .form-range::-webkit-slider-thumb { background: var(--qs-indigo-900); }
.roi-modal .form-range::-moz-range-thumb { background: var(--qs-indigo-900); }
.roi-output-card { background:var(--qs-indigo-50); border:1px solid var(--qs-indigo-100); }
.roi-output-card h4 { font-size:1.1rem; }
.roi-badge { background:var(--qs-indigo-900); color:#fff; font-size:.65rem; letter-spacing:.5px; }

/* Legacy tweaks (safe no-ops if used elsewhere) */
.carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }

/* Compact hero CTA variant (normalized and slightly smaller) */
/* Reduce horizontal footprint and keep consistent heights */
.hero-cta-compact { gap: .5rem !important; }
.hero-cta-compact .btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem .68rem .45rem .6rem; /* slightly less left padding to visually center with icon */
	font-size: .9rem;
	line-height: 1.2;
	border-radius: .55rem;
	min-height: 36px;
	white-space: nowrap;
}
.hero-cta-compact .btn-cta { padding: .45rem .68rem .45rem .6rem; }
.hero-cta-compact .btn-cta-link {
	display: inline-flex;
	align-items: center;
	padding: .45rem .2rem;
	min-height: 36px;
	font-size: .9rem;
}
.hero-cta-compact .btn i { font-size: .95rem; line-height: 1; margin-right: .15rem; }


/* Accessibility improvements */
.carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }

/* Light dark-mode consideration (if data-bs-theme toggles) */
[data-bs-theme="dark"] .lp-pillar-card { background:#1e1e2b; border-color:#2c2c3a; }
[data-bs-theme="dark"] .roi-output-card { background:#1e1e2b; border-color:#2c2c3a; }