:root {





            --brand-orange: #ff9900;





            --brand-orange-hover: #ffb84d;





            --brand-dark: #050505;





            --text-gray: #8c8c8c;





            --text-light: #f2f2f2;





        }











        body, html {





            margin: 0; padding: 0; font-family: 'Roboto Condensed', 'Roboto Fallback', sans-serif; color: var(--text-gray); line-height: 1.6; overflow-x: hidden; background: var(--brand-dark);





        }











        h1, h2, h3, .oswald-text { font-family: 'Oswald', 'Oswald Fallback', sans-serif; text-transform: uppercase; font-weight: 500; margin: 0; line-height: 1.2; color: var(--text-light); }











        a { text-decoration: none; transition: color 0.3s ease; }











        header { background-color: var(--brand-dark); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); border-bottom: 2px solid var(--brand-orange); }





        .nav-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }





        .nav-container a { color: white; padding: 18px 30px; font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; }





        .nav-container a:hover, .nav-container a.active { color: var(--brand-orange); }











        .hero {





            background: linear-gradient(rgba(5, 5, 5, 0.9), rgba(5, 5, 5, 0.9)), url('/images/good-panel.webp') no-repeat center center;





            background-size: cover; min-height: 50vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 5%; text-align: center;





        }





        .hero h1 { color: var(--brand-orange); font-size: clamp(2rem, 8vw, 5rem); }





        .hero p { color: white; font-size: clamp(1.2rem, 3vw, 2rem); font-family: 'Oswald', 'Oswald Fallback', sans-serif; margin-top: 15px; }











        .content-wrapper { max-width: 1000px; margin: 0 auto; padding: 60px 5%; }





        





        .honest-box {





            background-color: #fcfcfc;





            border-left: 8px solid var(--brand-orange);





            padding: 40px;





            margin: 40px 0;





            box-shadow: 0 10px 20px rgba(0,0,0,0.05);





        }





        .honest-box h2 { font-size: 2.5rem; margin-bottom: 20px; }





        .honest-box p { font-size: 1.2rem; color: #555; }





        .honest-box h2, .honest-box h3 { color: #1a1a1a; }











        .service-list { list-style-type: none; padding: 0; }





        .service-list li { font-size: 1.2rem; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; }





        .service-list li:before { content: '✔'; color: var(--brand-orange); font-weight: bold; margin-right: 15px; font-size: 1.5rem; }











        footer { background-color: var(--brand-dark); color: white; border-top: 1px solid #333; padding: 60px 5%; text-align: center; }





        footer h2 { color: white; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; }





        footer .phone-link { color: var(--brand-orange); font-weight: 700; }





        .trust-signals { margin-top: 30px; padding-top: 30px; border-top: 1px solid #333; font-size: 16px; color: #aaa; }





        .glass-btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); color: #ffffff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 16px 28px; border-radius: 20px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; }





    .glass-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px) scale(1.02); }





    .glass-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.05); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }





    .btn-fb:hover { border-color: rgba(24, 119, 242, 0.8); box-shadow: 0 8px 32px 0 rgba(24, 119, 242, 0.25); color: #1877F2; }





    .btn-fb:hover svg { fill: #1877F2; }





    .btn-ig:hover { border-color: rgba(230, 104, 60, 0.8); box-shadow: 0 8px 32px 0 rgba(230, 104, 60, 0.25); color: #e6683c; }





    .btn-ig:hover svg { fill: url(#ig-grad); }





    .btn-nd:hover { border-color: rgba(0, 181, 90, 0.8); box-shadow: 0 8px 32px 0 rgba(0, 181, 90, 0.25); color: #00B55A; }





    .btn-nd:hover svg { fill: #00B55A; }





    /* social: brand accent at rest (Nyx 2026-09-10) */





    /* Every brand colour used to live in :hover only, so on touch devices the row





       rendered as four identical grey buttons. Accent at rest, hover intensifies. */





    .social-badge-container .btn-fb:not(:hover) { border-color: rgba(24, 119, 242, 0.45); }





    .social-badge-container .btn-fb:not(:hover) svg { fill: #1877F2; }





    .social-badge-container .btn-ig:not(:hover) { border-color: rgba(230, 104, 60, 0.45); }





    .social-badge-container .btn-ig:not(:hover) svg { fill: #e6683c; }





    .social-badge-container .btn-nd:not(:hover) { border-color: rgba(0, 181, 90, 0.45); }





    .social-badge-container .btn-nd:not(:hover) svg { fill: #00B55A; }





    .social-badge-container .btn-x:not(:hover) { border-color: rgba(255, 255, 255, 0.5); }





    .social-badge-container .btn-x:not(:hover) svg { fill: #ffffff; }





    .social-badge-container .btn-x:hover { border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.18); color: #ffffff; }











        @media (max-width: 640px) { .nav-container a { padding: 14px 16px; font-size: 0.95rem; } }