:root {
  color-scheme:dark;
  --bg:#080808; --surface:#111111; --hover:#181818;
  --ink:#f2f2f2; --muted:#a3a3a3; --line:#303030;
  --vozen:#b5adff; --paperlab:#a4d9b6;
  --ease:cubic-bezier(.16,1,.3,1);
}
* {box-sizing:border-box}
body {margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main {max-width:1120px;margin:auto;padding:34px 40px 26px}
header {display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.wordmark {display:inline-flex;align-items:center;gap:14px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.portal-mark {display:grid;grid-template-columns:8px 8px;gap:4px;transform:rotate(-9deg)}
.portal-mark i {width:8px;height:8px;border-radius:2px;background:var(--ink)}
.portal-mark i:last-child {background:transparent;border:1px solid var(--muted)}
.domain {color:var(--muted);font-size:13px}
.intro-block {display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:48px 0 32px}
.kicker {margin:0 0 12px;color:var(--muted);font-size:14px}
h1 {max-width:10ch;margin:0;font-size:clamp(42px,5.1vw,62px);line-height:1.03;font-weight:550;letter-spacing:-.04em;text-wrap:balance}
.intro {margin:0 0 5px;color:var(--muted);font-size:14px;line-height:1.75}
nav {display:grid;gap:14px}
.destination {--app:var(--vozen);display:grid;grid-template-columns:minmax(0,1fr) 260px 44px;align-items:center;gap:20px;min-height:213px;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-decoration:none;transition:background .25s var(--ease),border-color .25s var(--ease)}
.destination.paperlab {--app:var(--paperlab)}
.destination:hover {background:var(--hover);border-color:#676767}
.destination:focus-visible {outline:3px solid var(--app);outline-offset:5px}
.destination-copy {min-width:0}
.app-category {display:block;color:var(--app);font-size:12px;margin-bottom:7px}
strong {display:block;font-size:33px;line-height:1.15;font-weight:600;letter-spacing:-.025em}
.brand-dot {color:var(--app)}
.description {display:block;margin-top:9px;color:var(--muted);font-size:14px}
.method {display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:26px;font-size:12px;color:var(--ink)}
.method svg,footer svg {width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.method svg {color:var(--app)}
.access-detail {color:var(--muted)}
.arrow {display:grid;place-items:center;width:44px;height:44px;border:1px solid #555555;border-radius:50%;color:var(--ink);font-size:23px;line-height:1;transition:background .25s var(--ease),color .25s var(--ease)}
.destination:hover .arrow {background:var(--ink);color:var(--bg)}
.app-visual {display:block;width:100%;height:170px;color:var(--app);overflow:visible;pointer-events:none}
.visual-wire {fill:none;stroke:#303030;stroke-width:1;stroke-dasharray:2 6}
.voice-bars {opacity:.72;transform-origin:center;transition:opacity .3s var(--ease),transform .5s var(--ease)}
.destination:hover .voice-bars {opacity:1;transform:scaleY(1.13)}
.shield-back {fill:#1b1924;stroke:#514966;stroke-width:1}
.shield-front {fill:#23202f;stroke:currentColor;stroke-width:1.5}
.shield-mark {fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.sheet-back {fill:#171e19;stroke:#405649;stroke-width:1}
.sheet-front {fill:#1c2520;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.sheet-fold {fill:none;stroke:currentColor;stroke-width:1.5}
.sheet-heading {fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
.sheet-lines {fill:currentColor;stroke:currentColor;stroke-width:1.3;opacity:.6}
.coin-back {fill:#111111;stroke:#4f6b58;stroke-width:1}
.coin-front {fill:#263c2e;stroke:currentColor;stroke-width:1.5}
.coin-mark {fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.paper-visual {transition:transform .5s var(--ease)}
.destination:hover .paper-visual {transform:translateY(-4px) rotate(2deg)}
footer {display:flex;align-items:center;gap:12px;margin-top:28px;color:var(--muted);font-size:12px}
footer p {margin:0;line-height:1.65}
footer p>span {color:var(--muted)}
.footer-mark {margin-left:auto;font-size:28px;font-weight:600;color:#767676;letter-spacing:-.04em}
@media (max-width:850px) {
  main {padding-right:28px;padding-left:28px}
  .intro-block {align-items:flex-start;flex-direction:column;gap:18px;margin-top:36px}
  h1 {max-width:none;font-size:46px}
  .destination {grid-template-columns:minmax(0,1fr) 180px 40px;padding:24px;gap:14px}
  .app-visual {height:140px}
  .arrow {width:40px;height:40px}
}
@media (max-width:560px) {
  main {padding:24px 20px}
  header {gap:12px;padding-bottom:22px}
  .domain {display:none}
  .intro-block {margin:30px 0 26px;gap:16px}
  h1 {font-size:43px;max-width:10ch}
  .intro {font-size:13px}
  .destination {position:relative;grid-template-columns:minmax(0,1fr) 90px;gap:8px;padding:22px 20px;min-height:220px}
  strong {font-size:30px}
  .app-category {font-size:11px}
  .description {font-size:13px;max-width:23ch}
  .app-visual {grid-column:2;grid-row:1;width:112px;height:110px;justify-self:center;align-self:start;margin-top:2px}
  .arrow {position:absolute;right:20px;bottom:22px;width:36px;height:36px;font-size:20px}
  .method {gap:6px;margin-top:24px;max-width:220px;padding-right:25px;font-size:11px}
  .access-detail {flex-basis:100%;padding-left:23px}
  .method svg {width:16px;height:16px}
  footer {align-items:flex-start;font-size:11px;margin-top:24px}
  footer svg {margin-top:3px}
  .footer-mark {display:none}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none!important;animation:none!important}
  .destination:hover .voice-bars,.destination:hover .paper-visual {transform:none}
}