:root {
  color-scheme: dark;
  --ink: #03131f;
  --navy: #06283f;
  --cyan: #46d8f5;
  --gold: #c4914d;
  --white: #f5fafc;
  --muted: #7897a8;
  --line: rgba(125, 202, 224, .18);
  --paper: #f1f5f5;
  --paper-line: #cfdbdd;
  --paper-ink: #0a2536;
  --serif: Georgia, "Times New Roman", "Noto Serif SC", serif;
  --sans: Inter, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; overflow-x: hidden; color: var(--white); background: var(--ink); font-family: var(--sans); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header { position: relative; z-index: 10; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 7vw, 112px); border-bottom: 1px solid var(--line); background: #02111c; }
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 22%; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.site-header img { display: block; width: 112px; height: 53px; object-fit: contain; mix-blend-mode: screen; }
.site-header > span { color: #5f8092; font: 8px var(--mono); letter-spacing: .15em; }
.site-header > span i { display: inline-block; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.identity { position: relative; min-height: 660px; overflow: hidden; display: grid; grid-template-columns: minmax(520px, 1fr) 260px; align-items: center; gap: 10vw; padding: 95px clamp(24px, 10vw, 160px); background: radial-gradient(circle at 78% 42%, rgba(31,132,174,.2), transparent 25%), linear-gradient(125deg, #03131f, #082d47 72%, #031621); }
.identity::before { content: ""; position: absolute; width: 58vw; height: 58vw; right: -21vw; top: -18vw; border: 1px solid rgba(70,216,245,.15); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(70,216,245,.018), 0 0 0 16vw rgba(70,216,245,.01); }
.identity-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(85,167,194,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(85,167,194,.11) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 78% 44%, black, transparent 58%); }
.identity-copy, .identity-code { position: relative; min-width: 0; }
.eyebrow { margin: 0 0 24px; color: var(--cyan); font: 700 9px var(--mono); letter-spacing: .18em; }
.eyebrow span { margin-left: 14px; padding-left: 14px; color: #6d91a4; border-left: 1px solid var(--line); }
h1 { margin: 0; font: 400 clamp(68px, 7.4vw, 118px)/.86 var(--serif); letter-spacing: -.065em; }
h1 em { color: #8db4c5; font-weight: 400; }
.identity h2 { margin: 47px 0 0; padding-left: 17px; border-left: 2px solid var(--gold); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: .08em; }
.identity-description { max-width: 870px; margin-top: 34px; }
.identity-description p { margin: 0 0 12px; color: #c8d7de; font: 400 clamp(16px, 1.55vw, 21px)/1.65 var(--serif); }
.identity-description p[lang="en"] { color: #7695a5; font-size: clamp(13px, 1.1vw, 16px); font-style: italic; }
.visit-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; width: min(100%, 330px); margin-top: 38px; padding: 15px 18px; cursor: pointer; border: 1px solid var(--cyan); color: #03131f; background: var(--cyan); box-shadow: 0 12px 34px rgba(30,171,204,.18); font-weight: 700; text-align: left; transition: background .2s, box-shadow .2s, transform .2s; }
.visit-button span { color: #397285; font: italic 12px var(--serif); }
.visit-button b { font: 400 18px var(--mono); }
.visit-button:hover, .visit-button:focus-visible { background: #7ae8fa; box-shadow: 0 15px 42px rgba(30,171,204,.3); transform: translateY(-2px); }
.identity-code { align-self: end; margin-bottom: 30px; padding: 22px; border: 1px solid var(--line); background: rgba(2,17,28,.55); font-family: var(--mono); }
.identity-code span, .identity-code small { display: block; color: #5e8295; font-size: 7px; letter-spacing: .13em; }
.identity-code strong { display: block; margin: 20px 0; color: var(--cyan); font-size: 23px; font-weight: 400; letter-spacing: .12em; }
.identity-code i { display: block; height: 1px; margin-bottom: 17px; background: linear-gradient(90deg, var(--cyan), transparent); }

.gate { width: min(1180px, calc(100% - 40px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; overflow: auto; color: var(--paper-ink); border: 1px solid var(--paper-line); background: var(--paper); box-shadow: 0 28px 100px rgba(0,0,0,.48); }
.gate::backdrop { background: rgba(1,10,17,.78); backdrop-filter: blur(8px); }
.gate[open] { animation: dialogIn .24s ease-out; }
.dialog-close { position: absolute; z-index: 3; top: 14px; right: 16px; display: grid; width: 38px; height: 38px; place-items: center; cursor: pointer; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #d7e5ea; background: rgba(3,19,31,.5); font: 300 24px/1 var(--sans); }
.dialog-close:hover, .dialog-close:focus-visible { color: #03131f; border-color: var(--cyan); background: var(--cyan); }
.gate-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: 50px; padding: 46px 50px; color: var(--white); background: linear-gradient(125deg, #08253a, #0a3856); }
.gate-heading > p { grid-column: 1 / -1; margin: 0; color: #d3ae76; font: 700 9px var(--mono); letter-spacing: .16em; }
.gate-heading h2 { margin: 0; font: 400 clamp(34px, 4vw, 56px)/1.08 var(--serif); letter-spacing: -.035em; }
.gate-heading h2 span { color: #8eb0c0; font-size: .45em; font-style: italic; }
.gate-heading > div { align-self: end; }
.gate-heading > div p { margin: 8px 0; color: #d0dde3; font-size: 13px; }
.gate-heading > div p[lang="en"] { color: #8da9b7; font-family: var(--serif); font-style: italic; }
.confirmation-columns { display: grid; grid-template-columns: 1fr 1fr; }
.confirmation-columns article { padding: 38px 42px; }
.confirmation-columns article + article { border-left: 1px solid var(--paper-line); background: rgba(255,255,255,.5); }
.confirmation-columns h3 { margin: 0 0 18px; font: 400 22px var(--serif); }
.confirmation-columns p, .confirmation-columns li { font-size: 13px; }
.confirmation-columns p { margin: 12px 0; }
.confirmation-columns ul { margin: 14px 0 20px; padding-left: 20px; }
.confirmation-columns li { margin: 8px 0; }
.confirmation-columns li::marker { color: #ad773a; }
.actions { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 28px; border-top: 1px solid var(--paper-line); background: #e7eeef; }
.actions button { cursor: pointer; }
.confirm { width: min(100%, 560px); padding: 14px 24px; border: 1px solid #0a7695; color: #02141f; background: var(--cyan); font-weight: 700; box-shadow: 0 10px 28px rgba(27,140,169,.2); }
.confirm:hover, .confirm:focus-visible { background: #73e4f8; }
.confirm span { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; opacity: .7; }
.leave { margin-top: 10px; padding: 8px 12px; border: 0; color: #607680; background: transparent; font-size: 12px; }
.leave:hover, .leave:focus-visible { color: var(--paper-ink); text-decoration: underline; }
.error { margin: 12px 0 0; color: #9b2626; text-align: center; }
.actions small { margin-top: 16px; color: #71858e; text-align: center; font-size: 10px; }

footer { display: flex; justify-content: space-between; gap: 30px; padding: 28px clamp(24px, 7vw, 112px); color: #547285; border-top: 1px solid var(--line); background: #020d14; font: 8px var(--mono); letter-spacing: .08em; }

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 850px) {
  .identity { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 55px; }
  .identity-code { width: min(100%, 320px); align-self: auto; margin: 0; }
  .gate-heading, .confirmation-columns { grid-template-columns: 1fr; }
  .gate-heading { gap: 28px; }
  .confirmation-columns article + article { border-top: 1px solid var(--paper-line); border-left: 0; }
}

@media (max-width: 600px) {
  .site-header { height: 70px; padding: 0 20px; }
  .site-header img { width: 100px; }
  .site-header > span { display: none; }
  .identity { padding: 82px 22px 72px; }
  h1 { font-size: 59px; }
  .identity h2 { font-size: 16px; }
  .identity-description p { font-size: 16px; }
  .identity-description p[lang="en"] { font-size: 13px; }
  .gate { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  .gate-heading { padding: 30px 24px; }
  .confirmation-columns article { padding: 28px 24px; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}