@font-face {
  font-family: Manrope;
  src: url('assets/manrope-cyrillic.woff2') format('woff2');
  font-weight: 200 800;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('assets/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Funnel;
  src: url('assets/funnel.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
:root { --cream: #f2eadf; --muted: #a9abb4; --page-gutter: clamp(28px,3.4vw,64px); }
body { font-family: Manrope,Arial,sans-serif; color: var(--cream); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #e9c996; outline-offset: 6px; }
.hero-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero-header { position: absolute; top: 4.8svh; left: var(--page-gutter); right: 112px; display: flex; align-items: center; justify-content: space-between; }
.hero-signature { display: flex; align-items: center; gap: 21px; }
.signature-point { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); }
.hero-signature p { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -.2px; }
.hero-nav { display: flex; gap: clamp(24px,2.7vw,48px); pointer-events: auto; align-items: center; }
.hero-nav button { padding: 7px 0; border: 0; background: none; color: var(--cream); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .75px; position: relative; }
.hero-nav button::after { content: ''; height: 1px; position: absolute; bottom: 2px; left: 0; right: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.hero-nav button:hover::after { transform: scaleX(1); }
.nav-demo span { margin-left: 9px; }
.hero-wordmark { position: absolute; left: calc(var(--page-gutter) - 5px); top: 9.4svh; color: var(--cream); font-family: Funnel,Arial,sans-serif; font-size: clamp(138px,11vw,202px); line-height: .86; letter-spacing: -.067em; font-weight: 400; text-decoration: none; pointer-events: auto; animation: hero-arrive 1.1s both; }
.vertical-label { position: absolute; top: 0; right: 0; width: 66px; height: 270px; display: flex; align-items: center; flex-direction: column; padding-top: 38px; gap: 19px; color: #17171b; background: var(--cream); }
.vertical-label > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vertical-label p { margin: 0; writing-mode: vertical-rl; font-size: 12px; font-weight: 750; letter-spacing: .4px; }
.hero-copy { position: absolute; right: var(--page-gutter); top: 35.8svh; width: clamp(286px,20vw,352px); pointer-events: auto; animation: hero-arrive .95s .12s both; }
.hero-eyebrow { margin: 0 0 22px; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #b8ac9d; }
.hero-copy h1 { margin: 0; font-size: clamp(29px,2.05vw,38px); line-height: 1.13; font-weight: 500; letter-spacing: -1.25px; }
.hero-copy h1 span { color: #ded7ce; }
.hero-description { margin: 24px 0 29px; max-width: 330px; color: #acaeb7; font-size: 14px; line-height: 1.7; letter-spacing: -.12px; }
.demo-cta { width: 100%; min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 19px; color: #1b1b20; background: var(--cream); border: 1px solid var(--cream); border-radius: 2px; font-size: 12px; font-weight: 650; text-align: left; transition: background .2s,border-color .2s; }
.demo-cta svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .2s; }
.demo-cta:hover { background: #e6ccb0; border-color: #e6ccb0; }
.demo-cta:hover svg { transform: translate(2px,-2px); }
.cta-caption { margin: 13px 0 0; color: #91939d; font-size: 11px; line-height: 1.5; letter-spacing: -.1px; }
.process-note { position: absolute; left: var(--page-gutter); bottom: 4.6svh; width: 236px; padding: 22px 22px 19px; border: 1px solid #e4d0af30; background: #e7c79b09; backdrop-filter: blur(7px); pointer-events: auto; animation: hero-arrive 1s .24s both; }
.note-eyebrow { margin: 0 0 20px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: #bfb7ab; }
.note-steps { margin: 0; font-size: 25px; line-height: 1.2; font-weight: 500; letter-spacing: -.9px; }
.process-note button { margin-top: 22px; padding: 16px 0 0; width: 100%; display: flex; justify-content: space-between; background: none; color: #d1c6b8; border: 0; border-top: 1px solid #e4d0af30; font-size: 11px; }
.process-note button:hover { color: #fff4e3; }
.world-caption { position: absolute; bottom: 3.5svh; left: 50%; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 12px; color: #ebd4b4; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 6px #23170e; white-space: nowrap; }
.world-caption > span:first-child { height: 4px; width: 4px; border-radius: 50%; background: #e5bf88; }
.caption-divider { color: #bca88e; font-weight: 300; }

.hero-dialog { width: min(540px,calc(100vw - 40px)); max-height: calc(100svh - 48px); margin: auto; padding: 38px; color: var(--cream); background: #151923; border: 1px solid #d5c3aa38; border-radius: 4px; box-shadow: 0 35px 100px #0009; overflow: auto; }
.hero-dialog::backdrop { background: #03060ed9; backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 30px; height: 30px; color: #bcb7af; background: transparent; border: 1px solid #cbb8993d; border-radius: 50%; }
.dialog-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dialog-eyebrow { margin: 0 0 23px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: #c7ac86; }
.dialog-title { margin: 0 0 22px; font-size: 29px; line-height: 1.15; font-weight: 500; letter-spacing: -1px; }
.dialog-copy { margin: 0; color: #b0b1b8; font-size: 13px; line-height: 1.75; }
.dialog-copy + .dialog-copy { margin-top: 14px; }
.dialog-copy p:first-child { margin-top: 0; }
.dialog-copy ul { padding-left: 19px; margin: 21px 0 0; }
.dialog-copy li { margin-top: 11px; }
.dialog-steps { list-style: none; counter-reset: steps; margin: 26px 0 0; padding: 0; }
.dialog-steps li { counter-increment: steps; position: relative; margin-top: 20px; padding: 17px 0 0 35px; border-top: 1px solid #d8c4a326; }
.dialog-steps li::before { content: '0' counter(steps); position: absolute; left: 0; top: 19px; font-size: 10px; color: #ad9575; }
.dialog-steps strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.dialog-steps h3 { margin: 0 0 7px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.dialog-steps p { margin: 0; font-size: 12px; line-height: 1.65; color: #a9aab2; }
.demo-form { display: grid; gap: 16px; margin-top: 26px; }
.form-row { display: grid; gap: 8px; font-size: 11px; color: #bdb8af; }
.form-row input { width: 100%; min-height: 45px; padding: 11px 12px; color: var(--cream); background: #080c1480; border: 1px solid #b9a98d42; border-radius: 2px; font-size: 13px; }
.form-row input::placeholder { color: #646773; }
.form-note { margin: 0; font-size: 10px; line-height: 1.6; color: #8f939f; }
.dialog-submit { width: 100%; min-height: 47px; padding: 12px 17px; color: #1b1b20; background: var(--cream); border: 1px solid var(--cream); border-radius: 2px; font-size: 12px; font-weight: 600; }
.dialog-submit:hover { background: #e6ccb0; border-color: #e6ccb0; }
.form-feedback { margin: 0; padding: 12px; color: #d7c4a3; background: #ceb1810c; border: 1px solid #ceb18130; font-size: 11px; line-height: 1.7; }
.form-feedback:empty { display: none; }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1200px) and (min-width: 701px) {
  .hero-wordmark { font-size: 11.4vw; }
  .hero-copy { width: 230px; right: 28px; top: 28svh; }
  .hero-copy h1 { font-size: 26px; }
  .hero-description { font-size: 12px; margin: 20px 0 24px; }
  .hero-eyebrow { font-size: 8px; }
  .demo-cta { font-size: 11px; padding-inline: 14px; }
  .process-note { width: 202px; padding: 19px; }
  .note-steps { font-size: 23px; }
  .hero-nav { gap: 22px; }
}
@media (max-width: 950px) {
  :root { --page-gutter: 20px; }
  .hero-header { top: 24px; right: 20px; }
  .hero-signature { gap: 9px; }
  .signature-point { width: 4px; height: 4px; }
  .hero-signature p { font-size: 10px; letter-spacing: -.25px; }
  .hero-nav { gap: 16px; }
  .hero-nav button { padding-block: 11px; font-size: 9px; letter-spacing: .55px; }
  .hero-nav .nav-demo { display: none; }
  .hero-wordmark { top: 10svh; left: 17px; font-size: 26vw; line-height: .87; letter-spacing: -.07em; }
  .vertical-label, .process-note { display: none; }
  .hero-copy { display: contents; animation: none; }
  .hero-eyebrow, .hero-description, .cta-caption { display: none; }
  .hero-copy h1 { position: absolute; top: 22svh; left: 21px; right: 20px; font-size: clamp(19px,5.6vw,25px); line-height: 1.2; letter-spacing: -.7px; font-weight: 450; pointer-events: none; }
  .demo-cta { position: absolute; bottom: 24px; left: 20px; width: calc(100% - 40px); min-height: 53px; font-size: 11px; pointer-events: auto; }
  .world-caption { bottom: 94px; font-size: 8px; gap: 9px; }
  .hero-dialog { padding: 31px 24px 25px; max-height: calc(100svh - 30px); }
  .dialog-title { font-size: 25px; padding-right: 14px; }
}
@media (min-width: 701px) and (max-width: 950px) {
  :root { --compact-brand: clamp(90px,min(17vw,16svh),120px); }
  .hero-wordmark { top: 8svh; left: 21px; font-size: var(--compact-brand); }
  .hero-copy h1 { top: calc(8svh + var(--compact-brand) + 8px); left: 24px; font-size: clamp(19px,2.7vw,22px); }
  .world { top: 58svh; width: min(82vw,740px); }
  .demo-cta { left: 50%; width: min(360px,calc(100% - 40px)); transform: translateX(-50%); }
  .hero-nav button { font-size: 10px; }
}
@media (min-width: 701px) and (max-width: 950px) and (max-height: 700px) {
  .world { top: 50svh; width: 70vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark, .hero-copy, .process-note { animation: none; }
  .hero-nav button::after, .demo-cta, .demo-cta svg { transition: none; }
}