/* Reusable Base Styles */ 
	.section-padding { padding: 60px 0; }
	.section-padding-sm { padding: 30px 0; }
	.section-title { font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 40px; }
	.section-title-sm { font-size: 32px; font-weight: 700; color: #1a1a1a; margin-bottom: 40px; }
	.btn-primary-custom { padding: 14px 32px; font-size: 16px; font-weight: 600; border-radius: 4px; text-decoration: none; display: inline-block; transition: all 0.3s ease; }
	.btn-primary-custom:hover { transform: translateY(-2px); }
    .web-view{display:block;}
	
	/* Hero Banner */
    h1{font-family: 'Roboto-Bold';}
	.hero-banner { position: relative; min-height: 431px; display: flex; align-items: center; overflow: hidden; background: #1a1a1a; }
	.hero-image { position: absolute; inset: 0; z-index: 1; }
	.hero-image img { width: 100%; height: 100%; object-fit: cover; }
	.hero-banner .container { position: relative; z-index: 3; padding: 80px 15px; }
	.hero-title { font-size: 42px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 20px; }
	.hero-subtitle { font-size: 18px; color: #fff; line-height: 1.6; margin-bottom: 30px; }
	.btn-hero { background: #fff; color: #1a1a1a; }
	.btn-hero:hover { background: #f0f0f0; box-shadow: 0 6px 20px rgba(255,255,255,.3); }
	
	/* Features */
	.feature-box { padding: 20px; transition: all 0.3s ease; }
	.feature-box:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,184,148,.15); }
	.feature-icon { width: 50px; height: 50px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
	.feature-icon img { width: 40px; height: 40px; }
	.feature-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin: 5px 0 8px; }
	.feature-description { font-size: 16px; color: #666; line-height: 1.5; margin: 0; }
	.feature-badge { background: #fff; border: 2px solid #00D47D; border-radius: 50px; padding: 12px 24px; font-size: 16px; color: #333; text-align: center; transition: all 0.3s ease; }
	.feature-badge:hover { background: #00D47D; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,212,125,.3); }
	.feature-badge .text-teal { color: #00D47D; font-weight: 700; }
	.feature-badge:hover .text-teal { color: #fff; }
	
	/* Plutus */
	.plutus-smart-section h2 { color: #333; }
	.plutus-image { padding: 5px 0 20px; }
	.plutus-image img { border-radius: 15px; width: 100%; }
	
	/* FAQ */
	.faq-list { background: #fff; border-radius: 8px; }
	.faq-question-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; cursor: pointer; }
	.faq-title { font-size: 18px; font-weight: 500; color: #1a1a1a; margin: 0; }
	.faq-arrow { width: 20px; height: 20px; transition: transform 0.3s ease; }
	.faq-item.active .faq-arrow { transform: rotate(180deg); }
	.faq-answer-wrapper { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; padding: 0 30px; }
	.faq-item.active .faq-answer-wrapper { max-height: 300px; padding: 0 30px 20px; }
	.faq-answer-wrapper p { font-size: 16px; color: #666; line-height: 1.6; margin: 0; }
	
	/* CTA */
	.cta-title { font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 30px; }
	.btn-cta { background: #003323; color: #fff; }
	.btn-cta:hover { background: #003d2d; box-shadow: 0 4px 12px rgba(0,86,63,.3);color:#fff; }
	
	/* Mobile */
	@media (max-width: 768px) {
		h1{font-size:28px;}
        .web-view{display:none;}
		.section-padding { padding: 40px 0; }
		.section-title, .cta-title { font-size: 28px; }
		.section-title-sm { font-size: 26px; }
		.section-title { text-align: center; }
		.btn-primary-custom { padding: 12px 28px; font-size: 15px; }
		.hero-banner { min-height: 76vh; align-items: baseline;}
		.hero-banner .container { padding: 30px 15px; }
		.hero-title { font-size: 32px; }
		.hero-subtitle { font-size: 16px; }
		.feature-box { padding: 15px; }
		.feature-icon { width: 40px; height: 40px; }
		.feature-icon img { width: 30px; height: 30px; }
		.feature-title { font-size: 18px; }
		.feature-description { font-size: 14px; }
		.feature-badge { font-size: 14px; padding: 10px 20px; }
		.faq-question-wrapper { padding: 16px 20px; }
		.faq-title { font-size: 16px; }
		.faq-answer-wrapper { padding: 0 20px; }
		.faq-item.active .faq-answer-wrapper { padding: 0 20px 16px; }
		.faq-answer-wrapper p { font-size: 14px; }
		.btn-cta { padding: 12px 32px; }
	}