.kicker { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; letter-spacing: .1em; color: var(--red); margin-bottom: 22px; }

.opener {
  position: relative; display: flex; align-items: center;
  height: 58vh; min-height: 440px; max-height: 640px;
  background: var(--zinc-950); color: var(--white); overflow: hidden;
}
.opener .zone-glow {
  background: radial-gradient(ellipse 70% 62% at 24% 62%,
    rgba(237, 29, 36, .26), rgba(237, 29, 36, .09) 52%, transparent 78%);
}
.opener-content { position: relative; z-index: 20; padding-top: 40px; }
.crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 12px; color: rgba(255,255,255,.6); }
.crumb a { transition: color .3s; }
.crumb a:hover { color: var(--red); }
.crumb span[aria-hidden] { color: rgba(255,255,255,.28); }
.opener-kicker {
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--red);
  letter-spacing: .5em; text-transform: uppercase; margin-bottom: 16px;
}
.opener-title {
  font-size: clamp(42px, 6.9vw, 102px); line-height: .9; font-weight: 900;
  letter-spacing: -.04em; text-transform: uppercase; color: var(--white);
  white-space: nowrap;
}
.opener-title .line { display: block; }
.opener-line {
  margin-top: 26px; max-width: 26em;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; color: rgba(255,255,255,.82);
}
.crumb, .opener-kicker, .opener-title .line, .opener-line { animation: rise 1s cubic-bezier(.16,1,.3,1) both; }
.opener-line { animation-delay: .22s; }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

.broch { padding-block: var(--sect); background: var(--white); }
.broch-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px; align-items: center;
}
.broch-stage {
  display: flex; justify-content: center;
  padding: 52px 48px; background: #ececef;
  perspective: 900px;
}
.broch-cover {
  position: relative; width: 100%; max-width: 384px;
  transform-style: preserve-3d; will-change: transform;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .10),
    0 10px 18px -8px rgba(15, 23, 42, .18),
    0 34px 54px -22px rgba(15, 23, 42, .30);
}
.broch-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 1414; }
.broch-cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 15px;
  background: linear-gradient(to right,
    rgba(15, 23, 42, .26), rgba(15, 23, 42, .06) 46%, transparent);
  pointer-events: none;
}
.broch-cover::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(15, 23, 42, .14); pointer-events: none;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255, 255, 255, .32) 50%, transparent 60%);
  background-size: 240% 100%;
  background-position: calc((50 + var(--glare, 0)) * 1%) 0;
}
.broch-copy h2 {
  font-size: clamp(42px, 4.8vw, 72px); font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.035em; color: var(--slate-900);
}
.broch-copy h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }
.btn {
  margin-top: 44px; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px; border: 1px solid var(--slate-900);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-900); background: transparent;
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
.btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn svg { transition: transform .3s ease; }
.btn:hover svg { transform: translateY(3px); }

.reg { position: relative; padding-block: var(--sect); background: #ececef; color: var(--zinc-950); }
.reg-head { max-width: 760px; margin-bottom: 44px; }
.reg-head h2 {
  font-size: clamp(48px, 6vw, 88px); font-weight: 900; text-transform: uppercase;
  line-height: .84; letter-spacing: -.04em; color: var(--slate-900);
}
.reg-head h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--black); }

.reg-bar { display: none; }
.js .reg-bar { display: block; margin-bottom: 34px; }
.reg-row { display: flex; align-items: center; gap: 24px; }
.reg-search { position: relative; flex: 1 1 auto; max-width: 520px; }
.reg-search > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--zinc-500); transition: color .3s; }
.reg-search:focus-within > svg { color: var(--red); }
.reg-search input {
  width: 100%; height: 46px; padding: 0 44px;
  font-family: var(--sans); font-size: 16px; color: var(--zinc-950);
  background: var(--white); border: 1px solid var(--zinc-300);
  transition: border-color .3s, box-shadow .3s;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.reg-search input::-webkit-search-cancel-button { display: none; }
.reg-search input::placeholder { color: var(--zinc-500); }
.reg-search input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2px rgba(237, 29, 36, .25); }
.reg-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--zinc-500); transition: color .3s;
}
.reg-clear:hover { color: var(--red); }
.reg-clear[hidden] { display: none; }
.reg-count {
  flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--zinc-600);
}

.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 13px; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--zinc-700); background: transparent;
  border: 1px solid var(--zinc-400);
  transition: color .3s, border-color .3s, background-color .3s;
}
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--zinc-500); transition: color .3s; }
.chip:hover { color: var(--zinc-950); border-color: var(--zinc-600); }
.chip.is-on { background: var(--slate-900); border-color: var(--slate-900); color: var(--white); }
.chip.is-on b { color: rgba(255, 255, 255, .6); }
.chip.is-zero { opacity: .35; }

.docs { list-style: none; counter-reset: doc; border-top: 1px solid var(--zinc-300); }
.doc-row { counter-increment: doc; border-bottom: 1px solid var(--zinc-300); }
.doc-row[hidden] { display: none; }
.doc {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 54px 64px minmax(0, 1fr) 210px 24px;
  grid-template-areas: "num cov id cat go";
  gap: 24px; padding: 16px 10px;
  scroll-margin-top: 90px;
  transition: background-color .4s ease;
}
.doc::before {
  grid-area: num; content: counter(doc, decimal-leading-zero);
  font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--zinc-500); transition: color .3s;
}
.doc:hover { background: rgba(255, 255, 255, .55); }
.doc:hover::before { color: var(--red); }
.doc-rule {
  position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.doc:hover .doc-rule, .doc:target .doc-rule { transform: scaleX(1); }
.doc:target { background: rgba(237, 29, 36, .07); }

.doc-cov {
  grid-area: cov; display: block; width: 64px; height: 90px; overflow: hidden;
  background: var(--white); border: 1px solid var(--zinc-300);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.doc-cov img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.doc:hover .doc-cov img { transform: scale(1.06); }
.doc-cov.is-plate {
  display: grid; place-items: center; background: var(--white);
  border: 1px solid var(--zinc-300);
}
.doc-cov.is-plate span {
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px;
  letter-spacing: -.01em; color: var(--zinc-600); transition: color .3s;
}
.doc:hover .doc-cov.is-plate span { color: var(--zinc-950); }

.doc-id { grid-area: id; min-width: 0; }
.doc-name { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--zinc-950); transition: color .3s; }
.doc:hover .doc-name { color: var(--red); }
.doc-by { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--zinc-600); }
.doc-cat { grid-area: cat; font-size: 13px; color: var(--zinc-600); }
.doc-go { grid-area: go; justify-self: end; color: var(--zinc-500); transition: color .3s, transform .3s; }
.doc:hover .doc-go { color: var(--red); transform: translateY(3px); }

.reg-empty {
  padding: 56px 10px; border-bottom: 1px solid var(--zinc-300);
  font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--zinc-500);
}
.reg-empty[hidden] { display: none; }

.appb {
  position: relative; overflow: hidden;
  padding-block: calc(var(--sect) * 1.75);
  background: linear-gradient(180deg, #0c0d10 0%, #101114 55%, #0b0c0e 100%);
  color: var(--white);
}
.appb .zone-grid {
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .9) 0 1px, transparent 1px 64px);
  background-size: auto; opacity: .045;
}
.appb .zone-glow {
  background: radial-gradient(ellipse 62% 58% at 30% 60%,
    rgba(237, 29, 36, .24), rgba(237, 29, 36, .09) 54%, transparent 80%);
}
.appb-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 7.5fr) minmax(0, 4.5fr);
  gap: 104px; align-items: center;
}
.appb-stage {
  position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  user-select: none; -webkit-user-select: none;
}
.appb-phone { margin: 0; flex: 0 1 38%; min-width: 0; position: relative; z-index: 1; }
.appb-phone img {
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
.appb-phone::after {
  content: ""; position: absolute; inset: 2.2% 5.1%; border-radius: 24px;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  background-size: 300% 100%; background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}
.appb-stage.lit .appb-phone::after { animation: appb-glare 1.3s ease-out both; }
.appb-stage.lit .appb-phone:nth-child(2)::after { animation-delay: .2s; }
.appb-stage.lit .appb-phone:nth-child(3)::after { animation-delay: .4s; }
@keyframes appb-glare {
  from { background-position: 130% 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { background-position: -30% 0; opacity: 0; }
}
.appb-front { flex-basis: 46%; z-index: 2; margin-inline: -5%; }
.appb-side { transform: translateY(64px); }
.appb-icon {
  width: 104px; height: 104px; border-radius: 23%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 36px rgba(0, 0, 0, .5);
}
.appb-copy h2 {
  margin-top: 34px;
  font-size: clamp(44px, 4.8vw, 70px); font-weight: 900; text-transform: uppercase;
  line-height: .84; letter-spacing: -.04em; color: var(--white);
}
.appb-copy h2 .outline { color: transparent; -webkit-text-stroke: 1px var(--white); }
.appb-line {
  margin-top: 26px; max-width: 24em;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .82);
}
.appb-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.appb-badge { display: block; transition: transform .3s; }
.appb-badge:hover { transform: translateY(-2px); }
.appb-badge img { display: block; width: auto; height: 48px; }

@media (max-width: 1279px) {
  .broch-inner { gap: 56px; }
  .appb-inner { grid-template-columns: 1fr; gap: 64px; }
  .appb-copy { order: 1; }
  .appb-stage { order: 2; width: 100%; max-width: 760px; margin-inline: auto; }
  .broch-stage { padding: 40px 36px; }
  .doc { grid-template-columns: 48px 64px minmax(0, 1fr) 180px 24px; gap: 20px; }
}

@media (max-width: 1023px) {
  .broch-inner { grid-template-columns: 1fr; gap: 44px; }
  .broch-stage { padding: 48px 40px; }
  .broch-cover { max-width: 330px; }
}

@media (max-width: 767px) {
  .opener { height: 52vh; min-height: 400px; }
  .opener-kicker { font-size: 13px; }
  .opener-line { margin-top: 20px; }
  .broch-stage { padding: 32px 26px; }
  .broch-cover { max-width: 268px; }
  .broch-cover::before { width: 10px; }
  .btn { margin-top: 32px; padding: 16px 26px; }
  .reg-head { margin-bottom: 32px; }
  .reg-row { gap: 14px; }
  .reg-search input { height: 44px; }
  .doc {
    grid-template-columns: 34px 52px minmax(0, 1fr) 20px;
    grid-template-areas: "num cov id go" "num cov cat go";
    gap: 4px 16px; padding: 14px 4px;
  }
  .doc-cov { width: 52px; height: 74px; }
  .doc-cov.is-plate span { font-size: 11px; }
  .doc-name { font-size: 16px; }
  .doc-cat { font-size: 12px; color: var(--zinc-600); }
  .reg-empty { font-size: 19px; padding: 40px 4px; }
  .appb-icon { width: 84px; height: 84px; }
  .appb-copy h2 { margin-top: 28px; }
  .appb-side { transform: translateY(30px); }
  .appb-badge img { height: 44px; }
}

@media (max-width: 559px) {
  .appb { padding-block: calc(var(--sect) * 1.1); }
  .appb-inner { gap: 48px; }
  .appb-side { transform: translateY(18px); }
  .appb-phone::after { border-radius: 12px; }
  .appb-badges { gap: 10px; }
  .appb-badge img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .crumb, .opener-kicker, .opener-title .line, .opener-line { animation: none; }
  .appb-stage.lit .appb-phone::after { animation: none; }
  .appb-badge, .appb-badge:hover { transform: none; transition: none; }
  .doc-cov img, .doc-rule, .doc-go, .btn svg { transition: none; }
  .doc:hover .doc-cov img { transform: none; }
  .doc:hover .doc-go, .btn:hover svg { transform: none; }
}