body {
 	font-family: 'Inter', sans-serif;
 }

 /* Hero */
 .about-hero {
 	padding: 40px 0 40px;
 }

 .about-hero-title {
 	font-size: clamp(2rem, 4vw, 2.75rem);
 	font-weight: 800;
 	color: #1f2937;
 }

 .about-hero-sub {
 	font-size: 1.2rem;
 	color: #6b7280;
 }

 /* Video */
 .video-wrapper {
 	position: relative;
 	border-radius: 24px;
 	overflow: hidden;
 	box-shadow: 0 10px 44px rgba(0, 0, 0, 0.12);
 }

 .video-wrapper img.bg {
 	width: 100%;
 	min-height: 380px;
 	object-fit: cover;
 	display: block;
 }

 .video-overlay {
 	position: absolute;
 	inset: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background: rgba(0, 0, 0, 0.18);
 }

 .play-btn {
 	width: 80px;
 	height: 80px;
 	border-radius: 50%;
 	background: rgba(255, 255, 255, 0.92);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
 	transition: transform .2s, background .2s;
 	border: none;
 }

 .play-btn:hover {
 	transform: scale(1.1);
 	background: #fff;
 }

 .play-btn i {
 	color: #2398B6;
 	font-size: 1.8rem;
 	margin-left: 4px;
 }

 /* Device methods */
 .method-card {
 	border-radius: 20px;
 	padding: 32px 20px;
 	text-align: center;
 	transition: box-shadow .25s, transform .25s;
 	background: #fff;
 }

 .method-card:hover {
 	transform: translateY(-6px);
 	box-shadow: 0 16px 40px rgba(35, 152, 182, .12);
 }

 .method-icon {
 	width: 72px;
 	height: 72px;
 	border-radius: 18px;
 	background: #f0f9fc;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin: 0 auto 18px;
 	font-size: 1.9rem;
 	color: #2398B6;
 	transition: background .25s, color .25s;
 }

 .method-card:hover .method-icon {
 	background: #2398B6;
 	color: #fff;
 }

 .method-card h5 {
 	font-weight: 700;
 	font-size: 1rem;
 	color: #1f2937;
 }

 .method-card p {
 	font-size: .88rem;
 	color: #6b7280;
 	margin: 0;
 }

 /* Section titles */
 .section-title {
 	font-size: clamp(1.5rem, 3vw, 2rem);
 	font-weight: 800;
 	color: #1f2937;
 }

 .section-body {
 	font-size: 1.05rem;
 	line-height: 1.85;
 	color: #6b7280;
 }

 /* Location banner */
 .location-banner {
 	background: linear-gradient(135deg, #f0f9fc 0%, #e8f4f8 100%);
 	border-radius: 24px;
 	padding: 56px 40px;
 }

 .location-banner p {
 	font-size: 1.15rem;
 	font-weight: 500;
 	color: #1f2937;
 	max-width: 820px;
 	margin: 0 auto;
 	line-height: 1.75;
 }

 /* Benefit cards */
 .benefit-card {
 	background: #fff;
 	border-radius: 24px;
 	padding: 40px;
 	height: 100%;
 	border: 1px solid #f3f4f6;
 	transition: box-shadow .25s, transform .25s;
 }

 .benefit-card:hover {
 	transform: translateY(-5px);
 	box-shadow: 0 20px 50px rgba(0, 0, 0, .07);
 }

 .benefit-item {
 	display: flex;
 	align-items: flex-start;
 	gap: 14px;
 	margin-bottom: 18px;
 	font-size: .97rem;
 	color: #6b7280;
 }

 .benefit-item i {
 	color: #2398B6;
 	font-size: 1.15rem;
 	margin-top: 2px;
 	flex-shrink: 0;
 }

 /* CTA Button */
 .btn-newhom {
 	background: #2398B6;
 	color: #fff;
 	border: none;
 	border-radius: 12px;
 	padding: 13px 30px;
 	font-weight: 600;
 	font-size: .95rem;
 	text-decoration: none;
 	display: inline-block;
 	transition: background .2s, transform .2s;
 }

 .btn-newhom:hover {
 	background: #1d7f99;
 	color: #fff;
 	transform: translateY(-2px);
 }

 /* Ad section */
 .ad-section {
 	background: linear-gradient(135deg, #eef8fb 0%, #dff0f6 100%);
 	border-radius: 24px;
 	padding: 60px 40px;
 }

 @media (max-width: 768px) {
 	.location-banner {
 		padding: 40px 24px;
 	}

 	.benefit-card {
 		padding: 28px;
 	}

 	.ad-section {
 		padding: 40px 24px;
 	}
 }