:root {
    --ink: #191b1b;
    --coal: #242727;
    --paper: #f5f3ed;
    --gold: #f2b705;
    --muted: #686c67;
    --line: #b7b4ac;
    --card: #ebe8e0;
    --products: #e4e1d9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }

.header {
    height: 86px;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 44px;
    padding: 0 5vw;
    background: #f5f3edf5;
    border-bottom: 1px solid #d3d0c7;
    backdrop-filter: blur(12px);
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    min-width: 0;
}
.brand-logo,
.footer-logo {
    height: 56px;
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 6px;
}
.footer-logo { height: 64px; margin-bottom: 10px; }
.brand-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.brand-name strong {
    font-size: 15px;
    letter-spacing: .04em;
    line-height: 1.1;
}
.brand-name small {
    font-size: 8px;
    letter-spacing: .06em;
    line-height: 1.25;
    color: #686c67;
    text-transform: uppercase;
}
.header nav {
    display: flex;
    gap: 28px;
    font-size: 13px;
    font-weight: 700;
}
.header nav a:hover { color: #8a6500; }

.hero {
    background: var(--coal);
    color: #fff;
}
.hero-copy { padding: 90px 7vw 70px; max-width: 980px; }
.eyebrow,
.label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    color: #979b97;
    margin: 0;
}
.hero h1 {
    font-size: clamp(42px, 6vw, 78px);
    line-height: .95;
    letter-spacing: -.055em;
    margin: 28px 0 0;
}
.hero h1 em {
    font-style: normal;
    color: var(--gold);
    display: block;
}
.lead {
    max-width: 620px;
    color: #c7c9c6;
    font-size: 19px;
    line-height: 1.6;
    margin: 22px 0 0;
}

.search { margin-top: 36px; max-width: 560px; }
.search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--ink);
    padding: 0 16px;
}
.search-field:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.search-field i { color: #8a6500; }
.search-field input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 15px 0;
    font: inherit;
    color: var(--ink);
    outline: none;
    min-width: 0;
}
.search-field input::placeholder { color: #8a8d88; }
.search-clear {
    border: 0;
    background: transparent;
    color: #686c67;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    padding: 0;
}
.search-clear:hover { color: var(--ink); }

.group { padding: 90px 7vw; background: var(--products); }
.group-dark { background: var(--coal); color: #fff; }
.group-dark .label,
.group-dark .group-sub,
.group-dark .count { color: #979b97; }
.group-dark .count { border-color: #505450; }
.group-dark .cards { border-color: #505450; }
.group-dark .card {
    background: #2a2d2b;
    border-color: #505450;
    color: #fff;
}
.group-dark .card:hover { background: #333735; }
.group-dark .card p { color: #afb2ae; }
.group-dark .app-icon { background: #1a1c1b; color: var(--gold); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 0;
}
h2 {
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: .95;
    letter-spacing: -.04em;
    margin: 14px 0 10px;
}
.group-sub { margin: 0; color: #616662; line-height: 1.65; }
.count {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #858982;
    border: 1px solid var(--line);
    padding: 8px 12px;
    white-space: nowrap;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-top: 50px;
}
.card {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 23px 23px 72px;
    min-height: 280px;
    background: var(--card);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: inherit;
}
.card:hover { background: #f6f3eb; }
.number { font-size: 10px; color: #858982; letter-spacing: .08em; }
.app-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 18px 0 20px;
    background: #2a2d2a;
    color: var(--gold);
    font-size: 22px;
}
.card small {
    color: #8a6500;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .11em;
}
.card h3 { font-size: 24px; margin: 9px 0; letter-spacing: -.02em; }
.card p {
    font-size: 14px;
    color: #5f645f;
    line-height: 1.55;
    margin: 0;
}
.access {
    position: absolute;
    left: 23px;
    right: 23px;
    bottom: 27px;
    border-bottom: 1px solid;
    padding-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.card[hidden],
.group[hidden],
.empty[hidden] { display: none; }
.empty {
    margin: 0;
    padding: 40px 7vw 90px;
    color: #616662;
    font-size: 16px;
}

footer {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 5vw;
    padding: 72px 7vw 27px;
    background: #111313;
    color: #c6c9c6;
}
footer > div { display: flex; flex-direction: column; align-items: flex-start; }
footer small {
    font-size: 9px;
    color: var(--gold);
    letter-spacing: .15em;
    margin-bottom: 14px;
}
footer p,
footer a { font-size: 12px; line-height: 1.6; margin: 3px 0; }
footer a:hover { color: var(--gold); }
.footer-brand b {
    font-size: 15px;
    letter-spacing: .02em;
    margin: 10px 0 8px;
    line-height: 1.3;
    max-width: 280px;
}
.footer-brand p { color: #8b908b; }
.copyright {
    grid-column: 1 / -1;
    border-top: 1px solid #343735;
    padding-top: 23px;
    margin-top: 30px !important;
    color: #737773 !important;
    font-size: 10px !important;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    padding: 10px 16px;
    background: var(--gold);
    color: var(--ink);
    z-index: 30;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.skip-link:focus { top: 12px; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

@media (max-width: 1000px) {
    .header nav { display: none; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .header { height: 72px; padding: 0 18px; }
    .brand-name strong { font-size: 13px; }
    .hero-copy,
    .group,
    .empty,
    footer { padding-left: 22px; padding-right: 22px; }
    .hero-copy { padding-top: 70px; padding-bottom: 50px; }
    .hero h1 { font-size: 42px; }
    .group { padding-top: 70px; padding-bottom: 70px; }
    .section-head { display: block; }
    .count { display: inline-block; margin-top: 16px; }
    .cards { grid-template-columns: 1fr; margin-top: 32px; }
    .search { max-width: none; }
    .search-field input { font-size: 16px; }
    footer { grid-template-columns: 1fr; padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .card { transition: none; }
}