.features{padding:80px 0;background:#fff}
.f-card{padding:28px 24px;border-radius:16px;border:1px solid var(--border);background:#fff;height:100%;transition:all .3s}
.f-card:hover{border-color:rgba(30,177,180,.3);box-shadow:0 8px 32px rgba(30,177,180,.08);transform:translateY(-4px)}
.f-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}
.f-icon.t{background:rgba(30,177,180,.1);color:var(--accent)}
.f-icon.b{background:rgba(59,130,246,.1);color:var(--blue)}
.f-icon.p{background:rgba(139,92,246,.1);color:var(--purple)}
.f-icon.o{background:rgba(251,146,60,.1);color:#fb923c}
.f-card h5{font-size:1rem;font-weight:600;margin-bottom:8px}
.f-card p{font-size:.88rem;color:var(--txt-body);line-height:1.6;margin-bottom:0}
.f-link{color:var(--accent);font-size:.88rem;font-weight:600;text-decoration:none;display:inline-block;margin-top:16px;transition:all .2s}
.f-link:hover{color:var(--accent-dark);transform:translateX(4px)}
.f-panel-mock{background:var(--dark-bg);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);height:100%}
.f-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.f-panel-dots{display:flex;gap:6px}
.f-panel-dots .dot{width:10px;height:10px;border-radius:50%}
.f-panel-dots .dot.red{background:#ef4444}
.f-panel-dots .dot.yellow{background:#f59e0b}
.f-panel-dots .dot.green{background:#22c55e}
.f-panel-url{font-family:'Courier New',monospace;font-size:.75rem;color:var(--txt-muted)}
.f-panel-body{padding:16px}
.f-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.f-panel-title{color:var(--txt-light);font-weight:600;font-size:.95rem}
.f-panel-btn{background:var(--accent);color:var(--dark-bg);font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:6px}
.f-panel-site{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;margin-bottom:8px}
.f-panel-site-icon{font-size:1.2rem}
.f-panel-site-name{color:var(--txt-light);font-size:.85rem;font-weight:500}
.f-panel-site-php{color:var(--txt-muted);font-size:.75rem}
.f-panel-site-dot{width:10px;height:10px;border-radius:50%;margin-left:auto}
.f-panel-site-dot.online{background:#22c55e}
.dev-badge{background:#3b82f6;color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:4px;vertical-align:middle}
.f-img{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg-alt);height:100%;min-height:200px;display:flex;align-items:center;justify-content:center}
.f-img-inner{width:100%;height:100%;min-height:200px;background:linear-gradient(135deg,#e2e8f0,#f1f5f9);display:flex;align-items:center;justify-content:center;color:var(--txt-muted)}