/* Layout: container, two-tier header, drawer, footer, section frames, inner-page head. From mockup B2. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ───────── HEADER: two tiers, sticky; tier 1 slides away on scroll ───────── */
.hdr { position: sticky; top: 0; z-index: var(--z-header); transition: transform .3s var(--ease); }
.hdr.is-scrolled { transform: translateY(calc(-1 * var(--tier1))); }
.tier1 { height: var(--tier1); background: var(--surface-deep); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .8rem; }
.tier1 .wrap { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.tier1__indep { margin-right: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.tier1__indep span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier1 a { text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .2rem; color: var(--text-1); transition: opacity var(--dur); }
.tier1 a:hover { opacity: .75; }
.tier1 a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-brand); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tier1 .icon { width: 16px; height: 16px; }

.lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-pill); background: oklch(96% .01 115 / .07); }
.lang a { min-height: 24px; padding: 0 .55rem; border-radius: var(--r-pill); font-weight: 600; font-size: .75rem; text-decoration: none; display: inline-flex; align-items: center; }
.tier1 .lang a:hover { opacity: 1; background: oklch(96% .01 115 / .08); }
.lang a[aria-current="true"] { background: var(--color-brand); color: var(--color-ink); }
.tier1 .lang a[aria-current="true"]:hover { background: var(--color-brand); }

.tier2 {
  height: var(--tier2);
  background: color-mix(in oklch, var(--surface-0) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.hdr.is-scrolled .tier2 { box-shadow: var(--shadow-2); }
.tier2 .wrap { height: 100%; display: flex; align-items: center; gap: 1.25rem; }

.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; min-height: 44px; }
.logo picture { display: block; }
.logo img { display: block; height: 30px; width: auto; transition: transform .35s var(--spring); }
.logo:hover img { transform: translateY(-1px) scale(1.03); }

.cats { display: flex; align-items: center; gap: .1rem; list-style: none; }
.cats a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .7rem; border-radius: var(--r-pill); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text-2); transition: background-color var(--dur), color var(--dur); }
.cats a .icon { width: 1.35em; height: 1.35em; color: var(--text-2); transition: color var(--dur), transform .3s var(--spring); }
.cats a:hover { background: var(--surface-2); color: var(--text-1); }
.cats a:hover .icon { color: var(--text-1); transform: translateY(-1px) rotate(-6deg); }
.cats a[aria-current="page"] { background: var(--surface-2); color: var(--text-1); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.cats a[aria-current="page"] .icon { color: var(--text-1); }

.hdr-search { margin-left: auto; position: relative; display: flex; align-items: center; flex: 0 1 280px; }
.tier2 .burger { display: none; }

/* ───────── DRAWER (mobile menu) ───────── */
.scrim { position: fixed; inset: 0; background: oklch(8% .02 200 / .6); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: var(--z-scrim); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: var(--z-drawer);
  background: var(--surface-1); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem 1.25rem 1.5rem;
  overflow-y: auto; transform: translateX(102%); visibility: hidden;
  transition: transform .38s var(--ease), visibility 0s linear .38s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer .search-field { flex: none; }
.drawer nav ul { list-style: none; display: grid; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 .25rem; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 1.05rem var(--font-body); }
.drawer nav a[aria-current="page"] { color: var(--color-brand); }
.drawer nav a > .icon { color: var(--text-muted); }
.drawer nav .dn { display: inline-flex; align-items: center; gap: .7rem; }
.drawer nav .dn .icon { width: 1.35em; height: 1.35em; color: var(--text-1); }
.drawer__util { display: flex; flex-wrap: wrap; gap: .5rem; }
.drawer__util a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem; border-radius: var(--r-pill); background: var(--surface-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.drawer .lang { background: var(--surface-2); }
.drawer .lang a { min-height: 36px; padding: 0 .8rem; }
.drawer__note { margin-top: auto; font-size: .82rem; color: var(--text-muted); display: flex; gap: .5rem; align-items: center; }

/* ───────── SECTIONS ───────── */
.sec { padding: var(--section-pad) 0; }
.sec--tight { padding: clamp(48px, 6vw, 88px) 0; }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2rem; }
.sec__head > div { min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 .8rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow .icon { color: var(--text-1); }
.sec h2, .h2 { margin-top: .7rem; font: 600 var(--fs-h2)/1.08 var(--font-display); letter-spacing: -.04em; }
.sec__sub { margin-top: .7rem; color: var(--text-2); max-width: 58ch; }
.sec__more { display: flex; justify-content: center; margin-top: 2rem; }

/* the one deep band (results) */
.deep { background: var(--surface-deep); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -1px 0 var(--line); }
.deep :focus-visible { outline-color: var(--color-brand); }

/* ───────── INNER PAGE HEAD ───────── */
.page-head { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 120% at 10% 100%, color-mix(in oklch, var(--color-brand) 7%, transparent), transparent 70%),
    radial-gradient(40% 90% at 95% 0%, color-mix(in oklch, var(--color-accent-2) 5%, transparent), transparent 70%);
}
.page-head__digits {
  position: absolute; right: -1rem; bottom: -1.4rem; z-index: -1; pointer-events: none; user-select: none;
  font: 600 clamp(6rem, 16vw, 13rem)/.8 var(--font-display); letter-spacing: -.07em; color: var(--field-num);
  font-variant-numeric: tabular-nums;
}
.page-head h1 { margin-top: 1rem; font: 600 var(--fs-h1-page)/1.06 var(--font-display); letter-spacing: -.045em; max-width: 22ch; overflow-wrap: anywhere; hyphens: auto; }
.page-head .lead { margin-top: 1rem; font-size: 1.1rem; color: var(--text-2); max-width: 62ch; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; list-style: none; font-size: var(--fs-small); color: var(--text-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--text-2); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text-1); }

/* content + aside */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.layout-aside > aside { position: sticky; top: calc(var(--tier2) + 24px); display: grid; gap: 14px; }

/* ───────── FOOTER: 3 columns + wide data strip ───────── */
.site-footer { background: var(--surface-deep); color: var(--text-2); font-size: .92rem; padding: clamp(56px, 7vw, 96px) 0 2.2rem; border-top: 1px solid var(--line); }
.foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(24px, 4vw, 56px); }
.foot-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.foot-brand p { max-width: 60ch; }
.foot-brand .logo img { height: 28px; }
.foot-col { display: grid; gap: 1.6rem; align-content: start; }
.foot-col h2 { font: 600 .78rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .8rem; }
.foot-col ul { list-style: none; display: grid; gap: .15rem; }
.foot-col a { position: relative; display: inline-flex; align-items: center; min-height: 32px; color: var(--text-1); text-decoration: none; transition: color var(--dur); }
.foot-col a:hover { color: var(--color-brand); }
.foot-data { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.foot-data > div { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--surface-deep-2); box-shadow: 0 0 0 1px var(--line); }
.foot-data dt { font: 600 .74rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.foot-data dd { margin: .5rem 0 0; color: var(--text-1); overflow-wrap: anywhere; }
.foot-data a { color: var(--text-1); }
.pay { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2rem; }
.pay li { display: grid; place-items: center; width: 84px; height: 46px; overflow: hidden; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-1); transition: transform .3s var(--spring); }
.pay li:hover { transform: translateY(-2px); }
.pay picture { display: contents; }
.pay img { display: block; width: auto; height: 28px; max-width: 64px; object-fit: contain; }
@media (max-width: 640px) {
  .pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pay li { width: auto; height: 42px; padding: 6px 8px; }
  .pay img { max-width: 100%; height: 24px; }
}
.foot-bottom { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--text-muted); }
.foot-bottom p { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ───────── responsive ───────── */
@media (max-width: 1240px) {
  .cats a { padding: 0 .55rem; font-size: .9rem; }
  .cats a .icon { display: none; }
}
@media (max-width: 1040px) {
  .tier1 .t1-link { display: none; }
  .cats, .tier2 .hdr-search { display: none; }
  .tier2 .burger { display: inline-grid; margin-left: auto; }
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .layout-aside > aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .foot-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --tier1: 32px; --tier2: 62px; }
  .tier1__indep .long { display: none; }
  .sec__head { margin-bottom: 1.4rem; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-data { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 389px) {
  .foot-top { grid-template-columns: 1fr; }
  .logo img { height: 26px; }
}