.site-header {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
     z-index: 10;
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 64px;
 }

 .brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
 }

 .brand-logo {
     border-radius: 8px;
 }

 .brand-sep {
     color: var(--muted);
 }

 .brand-desc {
     font-weight: 500;
     color: var(--muted);
 }

 .top-nav {
     display: inline-flex;
     gap: 6px;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 4px;
     box-shadow: var(--shadow-sm);
 }

 .nav-item {
     border: 0;
     background: transparent;
     padding: 10px 14px;
     border-radius: 10px;
     cursor: pointer;
     color: var(--muted);
     font-weight: 600;
 }

 .nav-item.is-active {
     background: #eef2ff;
     color: var(--text);
 }

 .page {
     padding: 22px 0 40px;
 }

 .view {
     display: none;
 }

 .view.is-active {
     display: block;
 }

 .view-header {
     margin: 10px 0 14px;
 }

 .view-title {
     margin: 0;
     font-size: 22px;
     letter-spacing: -0.02em;
 }

 .product-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
 }

 .product-tile {
     width: 100%;
     text-align: left;
     border: 1px solid var(--border);
     border-radius: 16px;
     background: var(--card);
     box-shadow: var(--shadow);
     overflow: hidden;
     cursor: pointer;
     padding: 0;
 }

 .product-tile:focus-visible {
     outline: 3px solid rgba(29, 78, 216, 0.35);
     outline-offset: 2px;
 }

 .product-image {
     width: 100%;
     height: 168px;
     object-fit: cover;
     display: block;
     background: #f1f5f9;
 }

 .product-body {
     padding: 14px 14px 16px;
 }

 .product-name {
     margin: 0;
     font-size: 14px;
     font-weight: 600;
     line-height: 1.3;
     word-break: break-word;
 }

 .card-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
 }

 .card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 18px;
 }

 .card-link {
     transition: transform 120ms ease, box-shadow 120ms ease;
 }

 .card-link:hover {
     transform: translateY(-1px);
     box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
 }

 .card-title {
     font-weight: 700;
     margin: 0 0 6px;
 }

 .card-subtitle {
     margin: 0;
     color: var(--muted);
     line-height: 1.4;
 }

 @media (max-width: 920px) {
     .product-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }

 @media (max-width: 640px) {
     .header-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
         padding: 12px 0;
     }

     .product-grid {
         grid-template-columns: 1fr;
     }

     .card-grid {
         grid-template-columns: 1fr;
     }
 }