@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { color-scheme: dark; --background: #121315; --surface: #1c1e21; --text: #f6f6f4; --secondary: #c5c9d0; --line: #454a51; --input-line: #858c96; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--background); color: var(--text); font-family: "Instrument Sans", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: inherit; color: var(--text); font-weight: 400; }
a { color: var(--text); text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button, input, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #cfdeff; outline-offset: 5px; }
[hidden] { display: none !important; }
.frame { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: absolute; left: 24px; top: 12px; transform: translateY(-180%); background: var(--text); color: var(--background); padding: 10px 18px; z-index: 10; }
.skip-link:focus { transform: none; }
.mast { display: flex; align-items: center; justify-content: space-between; min-height: 102px; gap: 24px; }
.wordmark { font-size: 21px; line-height: 1.03; font-weight: 600; letter-spacing: -.8px; }
.wordmark span { font-weight: 400; }
.mast-links { display: flex; align-items: center; gap: 36px; font-size: 15px; }
.mast-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mast-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta { border: 1px solid var(--input-line); padding: 9px 21px; border-radius: 30px; }
.hero { display: grid; grid-template-columns: 46% 54%; grid-template-rows: auto auto; grid-template-areas: "copy photo" "signup photo"; padding-block: 34px 58px; align-items: center; }
.hero-copy { grid-area: copy; padding-right: 22px; align-self: end; }
h1 { max-width: 570px; font-size: clamp(48px, 4.65vw, 70px); line-height: 1.035; letter-spacing: -.054em; text-wrap: balance; }
.hero-soon { color: var(--secondary); font-size: clamp(21px, 1.75vw, 26px); line-height: 1.35; margin-top: 12px; letter-spacing: -.02em; }
.hero-media { grid-area: photo; min-width: 0; text-align: center; padding-left: 16px; }
.hero-media img { display: block; width: 100%; height: auto; max-height: 700px; object-fit: contain; mix-blend-mode: lighten; }
.hero-media figcaption { color: var(--secondary); font-size: 13px; margin-top: 12px; }
.signup { width: 100%; max-width: 470px; }
.hero-signup { grid-area: signup; align-self: start; padding-right: 24px; margin-top: 32px; }
.signup label { display: block; color: var(--text); font-size: 15px; margin-bottom: 10px; }
.signup-line { display: flex; gap: 12px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--input-line); }
.signup-line button { flex-shrink: 0; border: 0; border-radius: 99px; padding: 12px 23px; min-height: 48px; background: var(--text); color: var(--background); font-size: 15px; font-weight: 500; transition: background-color .15s; }
.signup-line button:hover { background: #dce0e5; color: #121315; }
.form-message { min-height: 40px; color: var(--secondary); font-size: 13px; line-height: 1.45; margin-top: 12px; }
.collection { padding-block: 52px 64px; background: var(--surface); border-top: 1px solid var(--line); }
.collection-header { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 35px; }
.collection h2 { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.15; letter-spacing: -.04em; }
.collection-header p { color: var(--secondary); margin-top: 10px; font-size: 14px; }
.product-switch { display: flex; gap: 4px; border: 1px solid var(--input-line); border-radius: 30px; padding: 4px; }
.product-switch button { min-height: 44px; padding: 9px 20px; border: 0; border-radius: 24px; background: transparent; color: var(--text); font-size: 14px; }
.product-switch button[aria-pressed="true"] { color: var(--background); background: var(--text); }
.product-switch button[aria-pressed="false"]:hover { background: #34383e; color: var(--text); }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.product { display: grid; grid-template-columns: minmax(160px, 44%) 1fr; gap: 26px; align-items: center; }
.product-photo { background: #eceef0; border-radius: 3px; }
.product-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1/1.05; padding: 8px; object-fit: contain; mix-blend-mode: multiply; }
.product h3 { font-size: clamp(22px, 1.8vw, 27px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.product figcaption > p { font-size: 15px; color: var(--secondary); margin-top: 12px; }
.product figcaption .price { color: var(--text); margin-top: 18px; font-size: 16px; }
.closing { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 80px; padding-block: 76px 68px; }
.closing h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; letter-spacing: -.04em; }
.closing-copy > p { font-size: 16px; color: var(--secondary); max-width: 370px; margin-top: 19px; }
.closing .signup { justify-self: end; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px 32px; border-top: 1px solid var(--line); color: var(--secondary); font-size: 13px; line-height: 1.6; }
@media (min-width: 1440px) { .hero-copy { padding-right: 35px; } }
@media (max-width: 1000px) {
  .frame { width: calc(100% - 64px); }
  .hero { grid-template-columns: 49% 51%; padding-top: 20px; }
  h1 { font-size: clamp(41px, 5.2vw, 52px); }
  .hero-soon { font-size: 21px; }
  .hero-media { padding-left: 0; }
  .hero-signup { padding-right: 16px; }
  .product-grid { gap: 32px; }
  .product { grid-template-columns: 1fr; gap: 20px; }
  .product-photo img { aspect-ratio: 1.2/1; }
  .closing { gap: 40px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 20px; }
  .frame { width: calc(100% - 44px); }
  .mast { min-height: 80px; }
  .wordmark { font-size: 19px; }
  .mast-links { gap: 20px; font-size: 14px; }
  .collection-link { display: none !important; }
  .nav-cta { padding: 8px 18px; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "copy" "photo" "signup"; padding-block: 24px 35px; }
  .hero-copy { padding: 0; }
  h1 { max-width: 570px; font-size: clamp(39px, 10.2vw, 60px); line-height: 1.045; letter-spacing: -.05em; }
  .hero-soon { font-size: clamp(21px, 5.1vw, 26px); margin-top: 10px; }
  .hero-media { margin-top: 18px; }
  .hero-media img { width: 100%; max-height: 550px; }
  .hero-media figcaption { margin-top: 0; font-size: 12px; }
  .hero-signup { max-width: none; margin-top: 30px; padding: 0; }
  .signup-line { gap: 8px; }
  .signup-line button { padding-inline: 19px; }
  .collection { padding-block: 32px 38px; }
  .collection-header { flex-direction: column; align-items: flex-start; gap: 21px; margin-bottom: 26px; }
  .collection h2 { font-size: 30px; }
  .collection-header p { font-size: 13px; }
  .product-grid { gap: 18px; }
  .product { gap: 16px; }
  .product-photo img { aspect-ratio: .9/1; padding: 3px; }
  .product h3 { font-size: 20px; }
  .product figcaption > p { font-size: 14px; margin-top: 10px; }
  .product figcaption .price { font-size: 15px; margin-top: 14px; }
  .closing { grid-template-columns: 1fr; gap: 28px; padding-block: 43px 32px; }
  .closing h2 { font-size: 34px; }
  .closing-copy > p { margin-top: 16px; }
  .closing .signup { max-width: none; }
  .footer { flex-direction: column; align-items: flex-start; gap: 15px; padding-block: 22px 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.order label { margin-block: 14px 6px; }
.order input, .order select, .order textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--input-line); border-radius: 4px;
  color: var(--text); background: var(--background); font: inherit; font-size: 16px;
}
.order textarea { display: block; resize: vertical; }
.order .signup-line { margin-top: 18px; border: 0; }

button.nav-cta { font: inherit; color: var(--text); background: transparent; }
#zahtev { width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--input-line); border-radius: 8px; color: var(--text); background: var(--background); }
#zahtev::backdrop { background: rgb(0 0 0 / 70%); }
#zahtev h2 { margin-block: 12px; }
#zahtev > p { color: var(--secondary); }
#zahtev form[method="dialog"] { display: flex; justify-content: end; }
#zahtev form[method="dialog"] button { padding: 8px; color: var(--text); background: transparent; border: 1px solid var(--input-line); border-radius: 4px; }

.product-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.product figcaption .product-order .price { margin: 0; }
#zahtev { max-height: calc(100% - 32px); overflow: auto; }