.how-it-works-page{background-color:var(--bg-primary);color:var(--text-primary);padding-bottom:80px;font-family:Outfit,sans-serif}.how-it-works-page .hiw-hero{text-align:center;background:linear-gradient(to bottom, #0a0a0ae6, var(--bg-primary));padding:140px 20px 80px;position:relative}.how-it-works-page .hiw-hero .hiw-tag{color:var(--accent-amber);letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;font-size:.9rem;font-weight:600;display:inline-block}.how-it-works-page .hiw-hero h1{color:var(--white);max-width:800px;margin-bottom:24px;margin-left:auto;margin-right:auto;font-size:3.5rem;font-weight:700;line-height:1.1}@media (max-width:768px){.how-it-works-page .hiw-hero h1{font-size:2.2rem}}.how-it-works-page .hiw-hero p{color:var(--text-secondary);max-width:700px;margin:0 auto 40px;font-size:1.2rem;line-height:1.6}.how-it-works-page .hiw-section{border-top:1px solid #ffffff0d;padding:80px 20px}.how-it-works-page .hiw-section .hiw-container{max-width:1200px;margin:0 auto}.how-it-works-page .section-header-left{max-width:700px;margin-bottom:50px}.how-it-works-page .section-header-left h2{color:var(--white);margin-bottom:20px;font-size:2.5rem;font-weight:700}@media (max-width:768px){.how-it-works-page .section-header-left h2{font-size:2rem}}.how-it-works-page .section-header-left p{color:var(--text-secondary);font-size:1.1rem;line-height:1.6}.how-it-works-page .retrofit-grid{grid-template-columns:1fr;align-items:center;gap:40px;display:grid}@media (min-width:992px){.how-it-works-page .retrofit-grid{grid-template-columns:1fr 1fr}}.how-it-works-page .retrofit-grid .install-steps{flex-direction:column;gap:30px;display:flex}.how-it-works-page .retrofit-grid .install-steps .install-step-card{border-left:3px solid var(--accent-amber);background:#ffffff05;border-radius:0 16px 16px 0;padding:30px;transition:transform .3s}.how-it-works-page .retrofit-grid .install-steps .install-step-card:hover{background:#c5a36e0d;transform:translate(10px)}.how-it-works-page .retrofit-grid .install-steps .install-step-card .install-step-number{color:var(--accent-amber);letter-spacing:.1em;margin-bottom:10px;font-size:.9rem;font-weight:700}.how-it-works-page .retrofit-grid .install-steps .install-step-card h3{color:var(--white);margin-bottom:10px;font-size:1.5rem}.how-it-works-page .retrofit-grid .install-steps .install-step-card p{color:var(--text-secondary);line-height:1.5}.how-it-works-page .retrofit-grid .image-highlight-container{border:1px solid #ffffff0d;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 30px 60px #00000080}.how-it-works-page .retrofit-grid .image-highlight-container:after{content:"";pointer-events:none;background:linear-gradient(#0000,#00000080);position:absolute;inset:0}.how-it-works-page .control-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px;display:grid}.how-it-works-page .control-grid .control-card{background:#0000004d;border:1px solid #ffffff0d;border-radius:16px;padding:30px;transition:all .3s}.how-it-works-page .control-grid .control-card:hover{background:#c5a36e0d;border-color:#c5a36e4d;transform:translateY(-5px)}.how-it-works-page .control-grid .control-card .control-icon{background:#ffffff08;border-radius:12px;margin-bottom:20px;padding:15px;font-size:2rem;display:inline-block}.how-it-works-page .control-grid .control-card h4{color:var(--white);margin-bottom:15px;font-size:1.2rem}.how-it-works-page .control-grid .control-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.how-it-works-page .offline-grid{grid-template-columns:1fr;gap:40px;margin-top:40px;display:grid}@media (min-width:768px){.how-it-works-page .offline-grid{grid-template-columns:1fr 1fr 1fr}}.how-it-works-page .offline-grid .offline-card{text-align:center;background:linear-gradient(#ffffff05,#0000);border:1px solid #ffffff08;border-radius:20px;padding:40px 20px}.how-it-works-page .offline-grid .offline-card h4{color:var(--accent-amber);margin-bottom:15px;font-size:1.3rem}.how-it-works-page .offline-grid .offline-card p{color:var(--text-secondary);line-height:1.6}.how-it-works-page .compatibility-list{flex-wrap:wrap;gap:20px;margin-top:30px;display:flex}.how-it-works-page .compatibility-list .compat-item{color:var(--white);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:30px;align-items:center;gap:12px;padding:15px 25px;font-weight:500;display:flex}