.installation-page{--surface:#111;--surface2:#1a1a1a;--surface3:#222;--border:#2a2a2a;--muted:#aaa;background:#0a0a0a}.installation-page .orange{color:var(--lime)}.installation-page .page-hero{padding-top:64px}.installation-page h1,.installation-page h2,.installation-page h3,.installation-page h4{letter-spacing:normal}.installation-page h4{margin:0}.installation-page .steps-list{padding:0;margin:0}.installation-page .device-panel[hidden]{display:none}.installation-page .wa-btn{background:var(--lime);color:#111}.installation-page .wa-btn svg{fill:#111}.installation-page .wa-btn:hover{background:#e4ff9b}
/* PAGE HERO */
.page-hero{padding:7rem 4rem 3rem;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.page-hero::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(circle,rgba(214,255,98,0.07) 0%,transparent 70%);pointer-events:none}
.page-hero .badge{display:inline-block;background:rgba(214,255,98,0.12);border:1px solid rgba(214,255,98,0.3);color:var(--lime);font-size:.78rem;font-weight:600;padding:.4rem 1rem;border-radius:50px;margin-bottom:1rem}
.page-hero h1{font-size:2.6rem;font-weight:800;margin-bottom:.8rem}
.page-hero p{color:var(--muted);font-size:.95rem;max-width:600px;margin:0 auto}

/* DEVICE TABS */
.device-tabs-wrap{background:var(--surface);border-bottom:1px solid var(--border);padding:1.2rem 4rem;position:sticky;top:0;z-index:100}
.device-tabs{display:flex;gap:.6rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:1000px;margin:0 auto}
.device-tabs::-webkit-scrollbar{display:none}
.dtab{display:flex;align-items:center;gap:.5rem;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.6rem 1.2rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;color:var(--muted);white-space:nowrap;flex-shrink:0}
.dtab:hover{border-color:rgba(214,255,98,0.4);color:var(--text)}
.dtab.active{background:var(--lime);color:#000;border-color:var(--lime)}
.dtab-icon{font-size:1rem}

/* CONTENT */
.guide-content{max-width:900px;margin:0 auto;padding:3rem 4rem 6rem}
.device-panel{display:none}
.device-panel.active{display:block}

/* INTRO BOX */
.intro-box{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:2.5rem;display:flex;align-items:flex-start;gap:1rem}
.intro-box .ico{font-size:2rem;flex-shrink:0}
.intro-box h3{font-size:1rem;font-weight:700;margin-bottom:.4rem}
.intro-box p{font-size:.85rem;color:var(--muted);line-height:1.7}

/* APP CARD */
.app-section{margin-bottom:3rem}
.app-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.app-logo{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.app-logo.orange-bg{background:rgba(214,255,98,0.15);border:1px solid rgba(214,255,98,0.3)}
.app-logo.blue-bg{background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3)}
.app-logo.green-bg{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3)}
.app-logo.purple-bg{background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3)}
.app-info h2{font-size:1.2rem;font-weight:800}
.app-info p{font-size:.82rem;color:var(--muted);margin-top:.2rem}
.recommended{background:var(--lime);color:#000;font-size:.68rem;font-weight:800;padding:.2rem .6rem;border-radius:50px;margin-left:.5rem}

/* STEPS */
.steps-list{list-style:none}
.step-item{display:flex;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,0.04)}
.step-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--lime);color:#000;font-size:.82rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem}
.step-body h4{font-size:.95rem;font-weight:700;margin-bottom:.3rem}
.step-body p{font-size:.88rem;color:var(--muted);line-height:1.7}
.step-body a{color:var(--lime);font-weight:600}
.step-body a:hover{text-decoration:underline !important}
.step-body .code-box{background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:.7rem 1rem;font-size:.85rem;font-weight:700;color:var(--lime);margin-top:.5rem;letter-spacing:2px;display:inline-block}
.step-body .note{background:rgba(214,255,98,0.07);border-left:3px solid var(--lime);padding:.7rem 1rem;border-radius:0 6px 6px 0;font-size:.82rem;color:var(--muted);margin-top:.6rem;line-height:1.6}

/* DIVIDER */
.section-divider{border:none;border-top:1px solid var(--border);margin:2.5rem 0}

/* CTA BOX */
.cta-box{background:linear-gradient(135deg,rgba(214,255,98,0.1),rgba(214,255,98,0.03));border:1.5px solid rgba(214,255,98,0.3);border-radius:14px;padding:2rem;text-align:center;margin-top:2.5rem}
.cta-box h3{font-size:1.2rem;font-weight:800;margin-bottom:.5rem}
.cta-box p{font-size:.88rem;color:var(--muted);margin-bottom:1.2rem}
.wa-btn{display:inline-flex;align-items:center;gap:.6rem;background:#25d366;color:#fff;font-weight:700;font-size:.95rem;padding:.85rem 2rem;border-radius:10px;transition:background .2s}
.wa-btn:hover{background:#1da851}
.wa-btn svg{width:20px;height:20px;fill:#fff}


@media(max-width:900px){.page-hero{padding:3rem 1.5rem 2rem}.page-hero h1{font-size:2rem}.device-tabs-wrap{padding:1rem}.guide-content{padding:2rem 1.5rem 4rem}.recommended{display:inline-block;margin-top:5px}.cta-box{padding:1.5rem}.wa-btn{padding:.85rem 1.2rem}}

.installation-page .wa-btn{background:var(--lime);color:#111}.installation-page .wa-btn svg{fill:#111}.installation-page .wa-btn:hover{background:#e4ff9b}
