:root { --primary: #6B4226; --primary-dark: #4A2D18; --secondary: #2C1810; --accent: #C8963E; --accent-light: #E8C97A; --surface-light: #FFF9F0; --surface-dark: #1A0D08; --surface-cream: #FFFDF7; --text-dark: #1E1E1E; --text-muted: #5A5A5A; --danger-border: #DC3545; --danger-bg: #FFF5F5; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--text-dark); background: #fff; overflow-x: hidden; } /* Navbar Glassmorphism */ .navbar-custom { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); z-index: 1030; } .navbar-custom .navbar-brand { font-weight: 800; font-size: 1.25rem; color: var(--primary) !important; letter-spacing: -0.3px; } .navbar-custom .nav-link { font-weight: 600; color: var(--text-dark) !important; font-size: 0.95rem; transition: color 0.2s; padding: 0.5rem 1rem; } .navbar-custom .nav-link:hover { color: var(--accent) !important; } .navbar-custom .btn-nav-cta { background: linear-gradient(135deg, var(--accent), #A67C2E); color: #fff !important; font-weight: 700; border-radius: 50px; padding: 0.55rem 1.6rem; font-size: 0.9rem; border: none; transition: all 0.3s; box-shadow: 0 4px 14px rgba(200, 150, 62, 0.35); white-space: nowrap; } .navbar-custom .btn-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200, 150, 62, 0.5); background: linear-gradient(135deg, #D4A54A, #B8862E); } /* Hero */ .hero-section { background: linear-gradient(170deg, #FFFDF7 0%, #FFF8EC 40%, #FDF3E0 100%); padding-top: 7rem; padding-bottom: 5rem; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(200, 150, 62, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-headline { font-size: 2.8rem; font-weight: 800; line-height: 1.15; color: var(--secondary); letter-spacing: -0.5px; } .hero-headline .highlight { color: var(--accent); position: relative; } .hero-subtitle { font-size: 1.2rem; color: var(--text-muted); line-height: 1.6; margin-top: 1rem; } .hero-image-wrap { position: relative; display: inline-block; } .hero-image-wrap img { border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); max-width: 100%; height: auto; object-fit: contain; } /* CTA Button */ .btn-cta { display: inline-block; background: linear-gradient(135deg, #D4A54A 0%, #B8862E 50%, #8B6914 100%); color: #fff !important; font-weight: 800; font-size: 1.15rem; padding: 0.9rem 2.8rem; border-radius: 60px; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 28px rgba(180, 130, 40, 0.4); letter-spacing: 0.3px; text-align: center; } .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(180, 130, 40, 0.55); color: #fff !important; } .btn-cta-sm { font-size: 0.95rem; padding: 0.65rem 1.8rem; } /* Cards */ .card-custom { background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 2rem; height: 100%; transition: transform 0.3s, box-shadow 0.3s; } .card-custom:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } .card-custom .icon-circle { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; background: var(--surface-light); color: var(--accent); } /* Section Alt */ .section-alt { background: var(--surface-light); } /* Badge */ .badge-brand { background: rgba(200, 150, 62, 0.12); color: var(--primary); font-weight: 600; font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 50px; } /* Scam Alert */ .scam-alert { border-left: 5px solid var(--danger-border); background: var(--danger-bg); border-radius: 12px; padding: 2rem; } /* Guarantee Section */ .guarantee-section { background: var(--surface-dark); color: #fff; } .guarantee-section .guarantee-badge-img { max-width: 180px; height: auto; } /* Reviews */ .review-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); padding: 1.8rem; height: 100%; } .review-card .stars { color: #F0B90B; font-size: 0.95rem; letter-spacing: 2px; } .review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-light); } /* FAQ Accordion */ .accordion-custom .accordion-item { border: none; border-radius: 12px !important; margin-bottom: 0.75rem; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .accordion-custom .accordion-button { font-weight: 700; font-size: 1.05rem; color: var(--secondary); background: #fff; border-radius: 12px !important; padding: 1.2rem 1.5rem; box-shadow: none; } .accordion-custom .accordion-button:not(.collapsed) { background: var(--surface-cream); color: var(--primary); box-shadow: none; } .accordion-custom .accordion-button::after { background-size: 1.1rem; } .accordion-custom .accordion-body { padding: 1rem 1.5rem 1.5rem; font-size: 1rem; color: var(--text-muted); line-height: 1.7; background: #fff; } /* Footer */ .footer-dark { background: var(--surface-dark); color: #ccc; padding: 3rem 0 2rem; } .footer-dark a { color: var(--accent-light); text-decoration: none; } .footer-dark a:hover { color: #fff; } /* Responsive */ @media (max-width: 991.98px) { .hero-headline { font-size: 2rem; } .hero-section { padding-top: 5.5rem; padding-bottom: 3rem; } } @media (max-width: 767.98px) { .hero-headline { font-size: 1.7rem; } .hero-subtitle { font-size: 1rem; } .btn-cta { font-size: 1rem; padding: 0.75rem 2rem; } } /* Smooth scroll */ html { scroll-behavior: smooth; } 
.sub-hero{background:linear-gradient(170deg,#FFFDF7 0%,#FFF8EC 40%,#FDF3E0 100%);padding:6.5rem 0 3rem}.sub-hero h1{font-size:2.3rem;font-weight:800;color:var(--secondary)}.prose{font-size:1.12rem;line-height:1.8;color:var(--text-muted)}.prose h2{font-size:1.5rem;font-weight:800;color:var(--secondary);margin:2.2rem 0 .8rem}.prose li{margin-bottom:.5rem}.crumb{font-size:.85rem;color:var(--text-muted)}.crumb a{color:var(--primary)}@media(max-width:767.98px){.sub-hero h1{font-size:1.7rem}}