:root { --primary: #F7931E; --primary-dark: #D97706; --secondary: #1B5E20; --accent: #D32F2F; --surface-light: #FFF9F2; --surface-dark: #1C1C28; --text-dark: #1a1a1a; --text-muted: #5a5a5a; --white: #ffffff; --border-subtle: rgba(0, 0, 0, 0.05); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08); --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.14); --radius-lg: 20px; --radius-xl: 24px; } * { box-sizing: border-box; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--text-dark); background: var(--white); line-height: 1.7; overflow-x: hidden; } /* Navbar Glassmorphism */ .navbar-custom { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 10px 0; z-index: 1050; transition: all 0.3s ease; } .navbar-custom .nav-link { color: var(--text-dark) !important; font-weight: 600; font-size: 0.95rem; margin: 0 6px; transition: color 0.2s; } .navbar-custom .nav-link:hover { color: var(--primary) !important; } .navbar-brand img { height: 34px; width: auto; } /* Buttons */ .btn-cta { background: linear-gradient(135deg, var(--accent), #b71c1c); color: #fff; font-weight: 700; font-size: 1rem; padding: 12px 28px; border-radius: 50px; border: none; letter-spacing: 0.3px; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(211, 47, 47, 0.35); text-decoration: none; display: inline-block; text-align: center; } .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(211, 47, 47, 0.5); color: #fff; background: linear-gradient(135deg, #e53935, #b71c1c); } .btn-cta-outline { background: transparent; color: var(--accent); font-weight: 700; font-size: 1rem; padding: 12px 28px; border-radius: 50px; border: 2px solid var(--accent); letter-spacing: 0.3px; transition: all 0.3s ease; text-decoration: none; display: inline-block; text-align: center; } .btn-cta-outline:hover { background: var(--accent); color: #fff; transform: translateY(-3px); } .btn-cta-orange { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: 1rem; padding: 12px 28px; border-radius: 50px; border: none; letter-spacing: 0.3px; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(247, 147, 30, 0.4); text-decoration: none; display: inline-block; text-align: center; } .btn-cta-orange:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(247, 147, 30, 0.55); color: #fff; } /* Cards */ .card-custom { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); padding: 28px 24px; transition: all 0.35s ease; height: 100%; } .card-custom:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .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: 16px; } /* Hero */ .hero-section { background: linear-gradient(160deg, #FFF9F2 0%, #FFF3E4 40%, #FFEDD5 100%); padding: 100px 0 70px; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(247, 147, 30, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-headline { font-size: 2.8rem; font-weight: 800; line-height: 1.15; color: var(--text-dark); letter-spacing: -0.5px; } .hero-headline .highlight { color: var(--primary); position: relative; } .hero-subtitle { font-size: 1.2rem; color: var(--text-muted); margin-top: 16px; line-height: 1.6; } .hero-image-wrap { position: relative; display: flex; justify-content: center; align-items: center; } .hero-image-wrap img { max-height: 480px; width: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.18)); border-radius: var(--radius-xl); } /* Section Alt */ .section-alt { background: var(--surface-light); } .section-dark { background: var(--surface-dark); color: #e0e0e0; } .section-dark h2, .section-dark h3, .section-dark h4 { color: #ffffff; } .section-warning { background: #FFF5F5; border-top: 3px solid #ffcdd2; border-bottom: 3px solid #ffcdd2; } /* Badges */ .badge-brand { background: rgba(247, 147, 30, 0.12); color: var(--primary-dark); font-weight: 700; font-size: 0.85rem; padding: 6px 14px; border-radius: 50px; letter-spacing: 0.3px; } .badge-green { background: rgba(27, 94, 32, 0.1); color: var(--secondary); font-weight: 700; font-size: 0.85rem; padding: 6px 14px; border-radius: 50px; } /* Stars */ .stars { color: #f59e0b; font-size: 1.1rem; letter-spacing: 2px; } /* Testimonial Card */ .testimonial-card { background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); padding: 28px 22px; transition: all 0.35s ease; height: 100%; } .testimonial-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .testimonial-card img.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); } /* Accordion */ .accordion-custom .accordion-item { border: 1px solid var(--border-subtle); border-radius: 14px !important; margin-bottom: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); } .accordion-custom .accordion-button { font-weight: 700; font-size: 1.05rem; padding: 18px 22px; background: #fff; color: var(--text-dark); box-shadow: none; border-radius: 14px !important; transition: all 0.2s; } .accordion-custom .accordion-button:not(.collapsed) { background: #FFF9F2; color: var(--primary-dark); box-shadow: none; } .accordion-custom .accordion-button:focus { box-shadow: none; border-color: var(--primary); } .accordion-custom .accordion-body { padding: 18px 22px 22px; font-size: 1rem; color: var(--text-muted); line-height: 1.7; } /* Footer */ .footer-custom { background: #14141e; color: #999; padding: 40px 0 24px; font-size: 0.9rem; } .footer-custom a { color: #ccc; text-decoration: none; transition: color 0.2s; } .footer-custom a:hover { color: var(--primary); } /* Responsive */ @media (max-width: 991px) { .hero-headline { font-size: 2rem; } .hero-section { padding: 80px 0 50px; text-align: center; } .hero-image-wrap img { max-height: 340px; margin-top: 20px; } } @media (max-width: 576px) { .hero-headline { font-size: 1.6rem; } .btn-cta, .btn-cta-orange { padding: 10px 20px; font-size: 0.9rem; } .card-custom { padding: 20px 16px; } } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Image styles */ .img-rounded { border-radius: var(--radius-lg); object-fit: cover; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .img-product-hero { border-radius: var(--radius-xl); object-fit: contain; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16); } .pain-thumb { border-radius: 16px; object-fit: cover; width: 100%; aspect-ratio: 329/256; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .pain-thumb:hover { transform: scale(1.03); }  @media (max-width:576px){ .btn-cta,.btn-cta-orange{max-width:100%;white-space:normal;word-break:break-word;} h1,h2{word-break:break-word;} }