:root{
	--bs-primary: #0d6efd;
	--brand-50: #f5f8ff;
	--brand-100: #e6f0ff;
	--brand-500: #0d6efd;
	--text-color: #1f2937;
}

/* Base styles */
*{box-sizing:border-box}
html,body{height:100%}
body{
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	margin:0;
	color:var(--text-color);
	background: #fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

a{color:var(--bs-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Hero */
.hero{
	/* stronger, marketable banner gradient */
	background: linear-gradient(135deg, rgba(13,110,253,0.95) 0%, rgba(79,70,229,0.92) 55%, rgba(99,102,241,0.85) 100%);
	color: #fff;
	padding-top:5rem;
	padding-bottom:5rem;
	position:relative;
	overflow:hidden;
}
.hero .display-5{color:#fff;font-weight:700}

/* Decorative accent under hero heading */
.hero h1::after{
	content:'';
	display:block;
	width:64px;
	height:6px;
	background:rgba(255,255,255,0.95);
	border-radius:4px;
	margin-top:1rem;
}

/* Make heading larger but responsive */
.hero .display-5{font-size:clamp(2.2rem, 5vw, 3.6rem);line-height:1.05}
.hero .lead{color:rgba(255,255,255,0.9);font-size:1.125rem}

/* Stronger CTA */
.hero .btn-primary{
	background-color:#fff;
	color:var(--brand-500);
	border:0;
	padding:.75rem 1.25rem;
	font-weight:700;
	box-shadow: 0 8px 20px rgba(13,110,253,0.18);
}
.hero .btn-outline-primary{
	color:#fff;border-color:rgba(255,255,255,0.85);
}
.hero .btn-outline-primary:hover{background:rgba(255,255,255,0.06)}

/* subtle background shapes to give depth */
.hero::before{
	content:'';
	position:absolute;right:-10%;top:-10%;width:420px;height:420px;background:rgba(255,255,255,0.04);border-radius:50%;transform:rotate(15deg);pointer-events:none;
}
.hero::after{
	content:'';position:absolute;left:-8%;bottom:-12%;width:520px;height:320px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));border-radius:30px;pointer-events:none;
}

.mockup{min-height:220px;display:flex;align-items:center;justify-content:center}
.mockup img{max-height:180px}

/* Carousel (hero) sizing: keep slides consistent and full width of column */
.hero-carousel{overflow:hidden}
.hero-carousel .carousel-item{position:relative}
.hero-carousel .carousel-item img{width:100%;height:260px;object-fit:cover;display:block}
@media (min-width: 1200px){
	.hero-carousel .carousel-item img{height:320px}
}
@media (max-width: 991px){
	.hero-carousel .carousel-item img{height:200px}
}

/* Slightly reduce hero vertical padding to keep banner compact */
.hero{padding-top:4rem;padding-bottom:4rem}

/* Card tweaks for features */
.card{border-radius:0.75rem}

/* Buttons */
.btn-primary{
	background-color:var(--brand-500);
	border-color:var(--brand-500);
}
.btn-outline-primary{color:var(--brand-500);border-color:var(--brand-500)}

/* Footer */
footer{font-size:0.95rem}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive spacing utilities (small additions) */
@media (min-width: 992px){
	.hero{padding-top:6rem;padding-bottom:6rem}
}

/* Utility for small badges */
.badge-soft{
	background-color:var(--brand-50);
	color:var(--brand-500);
	padding:.35em .6em;
	border-radius:.5rem;
	font-weight:600;
}

/* End of project CSS scaffold */

/* About section */
/* Increase vertical spacing for clearer separation */
.hero{padding-top:6rem;padding-bottom:6rem}
.about-section{padding-top:4.5rem;padding-bottom:4.5rem}
.about-section .content{padding-right:0;padding-left:0}
.about-section .media{padding:0}
/* Let Bootstrap handle most layout; limit image height so full image fits and aspect ratio is preserved */
.about-section .media img{width:100%;height:auto;display:block}
@media (max-width: 991px){
	.about-section .media img{width:100%;height:auto}
}
.features-section{padding-top:3.5rem;padding-bottom:3.5rem}
.footer-section{padding-top:2.5rem;padding-bottom:2.5rem}
.about-section h2{margin-bottom:0.75rem}
.about-section ul{margin-top:.5rem;margin-bottom:.5rem}


