/* ============ FEATURES PAGE ============ */
.subnav { position: sticky; top: 70px; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.subnav-in { display: flex; gap: 6px; height: 54px; align-items: center; overflow-x: auto; }
.subnav a { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--muted); padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.subnav a:hover { background: var(--mist); color: var(--ink); }

.feat-block { padding: 80px 0; border-bottom: 1px solid var(--line-2); scroll-margin-top: 130px; }
.feat-block:nth-child(even) { background: var(--mist); }

.spec-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.spec-list li { display: flex; gap: 13px; align-items: flex-start; }
.spec-list .material-icons { color: var(--blue); font-size: 21px; flex: none; margin-top: 2px; }
.spec-list b { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.spec-list p { font-size: 14px; color: var(--muted); margin-top: 1px; }

.feat-index { padding: 80px 0; }
.fi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 40px; }
.fi-cell { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.fi-cell .material-icons { color: var(--blue); font-size: 22px; margin-bottom: 10px; }
.fi-cell b { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; display: block; margin-bottom: 4px; }
.fi-cell p { font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) { .fi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fi-grid { grid-template-columns: 1fr; } }