/* ---------- fonty (self-hosted, patrz fonts/) ---------- */
    /* Pliki .woff2 pobrane z Google Fonts (Archivo v25, IBM Plex Mono v20).
       unicode-range skopiowane dosłownie z arkusza Google Fonts. Archivo jest zmienny:
       font-weight/font-stretch podane jako zakresy, inaczej przeglądarka nie udostępni
       osi wght/wdth używanych w font-variation-settings. IBM Plex Mono w wagach 400 i 500:
       .tag siedzi w <h3>, więc dziedziczy bold 700, a przeglądarka dopasowuje go do 500. */

    /* latin-ext */
    @font-face {
      font-family: 'Archivo';
      font-style: normal;
      font-weight: 300 700;
      font-stretch: 75% 125%;
      font-display: swap;
      src: url(../fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
      font-family: 'Archivo';
      font-style: normal;
      font-weight: 300 700;
      font-stretch: 75% 125%;
      font-display: swap;
      src: url(../fonts/archivo-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;
    }

    /* latin-ext */
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/ibm-plex-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(../fonts/ibm-plex-mono-400-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;
    }

    /* latin-ext */
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/ibm-plex-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* latin */
    @font-face {
      font-family: 'IBM Plex Mono';
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url(../fonts/ibm-plex-mono-500-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 {
      --void: #000;
      --card: #0d0d0d;
      --line: #1f1f1f;
      --chalk: #ededea;
      --dim: #807d78;
      --amber: #e8a33d;
      --wide: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    }

    * {
      box-sizing: border-box
    }

    ::selection {
      background: var(--amber);
      color: var(--void);
    }

    ::-moz-selection {
      background: var(--amber);
      color: var(--void);
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth
    }

    [id] {
      scroll-margin-top: 28px
    }

    body {
      margin: 0;
      background: var(--void);
      color: var(--chalk);
      font-family: var(--wide);
      font-variation-settings: 'wdth' 100;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    main,
    header,
    footer,
    .hero {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 24px
    }

    /* ---------- utility type ---------- */
    .eyebrow {
      font-family: var(--mono);
      font-weight: 400;
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--dim);
      margin: 0;
    }

    .tld {
      color: var(--dim)
    }

    /* ---------- header ---------- */
    header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 40px;
    }

    .markwrap {
      position: relative;
      display: block;
      width: 200px;
      height: 150px;
      max-width: 100%;
      margin: 0 auto;
    }

    .mark {
      position: absolute;
      inset: 0;
      margin: auto;
      display: block;
      width: auto;
      height: 128px;
      max-width: 100%;
      max-height: 100%;
      transition: opacity .45s ease;
    }

    .markwrap canvas {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    .markwrap.is-live .mark {
      opacity: 0
    }

    .lang {
      position: absolute;
      top: 40px;
      right: 24px;
      font-family: var(--mono);
      font-size: .75rem;
      letter-spacing: .1em;
      color: var(--dim);
      white-space: nowrap;
    }

    .lang a {
      color: var(--dim);
      text-decoration: none;
      border-bottom: 1px solid transparent
    }

    .lang a:hover,
    .lang a:focus-visible {
      color: var(--chalk);
      border-bottom-color: var(--amber)
    }

    .lang [aria-current] {
      color: var(--chalk)
    }

    /* ---------- hero ---------- */
    .hero {
      padding: 52px 24px 80px
    }

    .hero h1 {
      font-size: clamp(2.5rem, 8vw, 4.2rem);
      font-variation-settings: 'wdth' 118, 'wght' 320;
      line-height: 1.02;
      letter-spacing: -.015em;
      margin: 0 0 28px;
    }

    .hero p {
      font-family: var(--mono);
      max-width: 58ch;
      color: var(--dim);
      font-size: 1.0625rem;
      line-height: 1.7;
      letter-spacing: -0.01em;
      text-wrap: pretty;
      margin: 0;
    }

    /* links sit inside a dim paragraph, so they lift to chalk on an amber hairline and
   go full amber on hover. Same language as the footer links. */
    .hero a {
      color: var(--chalk);
      text-decoration: none;
      border-bottom: 1px solid rgba(232, 163, 61, .5);
      transition: color .2s ease, border-color .2s ease;
    }

    .hero a:hover,
    .hero a:focus-visible {
      color: var(--amber);
      border-bottom-color: var(--amber)
    }

    /* ---------- flagship ---------- */
    .flagship {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 28px;
      align-items: center;
      text-decoration: none;
      color: inherit;
      background: var(--void);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 34px;
      overflow: hidden;
      transition: transform .25s cubic-bezier(.2, 0, 0, 1), border-color .25s ease, background .25s ease;
    }

    .flagship:hover,
    .flagship:focus-visible {
      border-color: #4a3a20;
      background: #080604
    }

    @media (hover: hover) and (pointer: fine) {
      .flagship:hover {
        transform: translateY(-2px);
      }
    }

    .flagship .eyebrow {
      color: var(--amber)
    }

    .flagship h2 {
      margin: 16px 0 10px
    }

    .brand {
      display: block;
      width: auto;
      height: 44px
    }

    .claim {
      font-size: 1.15rem;
      font-variation-settings: 'wdth' 105, 'wght' 400;
      margin: 0 0 16px;
    }

    .flagship p.desc {
      font-family: var(--mono);
      color: var(--dim);
      font-size: .88rem;
      line-height: 1.6;
      max-width: 46ch;
      margin: 0
    }

    .go {
      display: inline-block;
      font-family: var(--mono);
      font-size: .85rem;
      color: var(--amber);
      margin-top: 22px;
    }

    .go .tld {
      color: var(--amber);
      opacity: .6
    }

    .cup {
      display: block;
      width: calc(100% + 34px);
      height: auto;
      margin-right: -34px;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 14%);
      mask-image: linear-gradient(to right, transparent, #000 14%);
      animation: rise .9s cubic-bezier(.2, .6, .2, 1) .15s both;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ---------- media grid ---------- */
    .media {
      padding: 76px 0 0
    }

    .media>.eyebrow {
      margin-bottom: 22px
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      background: var(--void);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 24px;
      min-height: 210px;
      transition: transform .25s cubic-bezier(.2, 0, 0, 1), border-color .25s ease, background .25s ease;
    }

    .card:hover,
    .card:focus-visible {
      border-color: #3d3d3d;
      background: #080808
    }

    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: translateY(-2px);
      }
    }

    .card h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 60px;
      margin: 0 0 14px;
    }

    .card h3 img {
      display: block;
      width: auto;
      opacity: .88;
      transition: opacity .25s ease;
    }

    .card:hover h3 img,
    .card:focus-visible h3 img {
      opacity: 1
    }

    .logo-nc {
      height: 26px
    }

    .logo-ek {
      height: 58px
    }

    .logo-vcf {
      height: 34px
    }

    .card p {
      font-family: var(--mono);
      color: var(--dim);
      font-size: .84rem;
      line-height: 1.6;
      margin: 0 0 auto
    }

    .card .go {
      color: var(--chalk);
      opacity: .75;
      font-size: .8rem;
      margin-top: 20px
    }

    .card .go .tld {
      color: var(--chalk);
      opacity: .45
    }

    .card:hover .go,
    .card:focus-visible .go {
      color: var(--amber);
      opacity: 1
    }

    .card:hover .go .tld,
    .card:focus-visible .go .tld {
      color: var(--amber);
      opacity: .6
    }

    .tag {
      font-family: var(--mono);
      font-weight: 500;
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--dim);
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 2px 9px;
      white-space: nowrap;
    }

    /* ---------- services ---------- */
    .services {
      padding: 0 0 76px
    }

    .services>.eyebrow {
      margin-bottom: 22px
    }

    .services .grid {
      gap: 34px 28px
    }

    .services h3 {
      font-size: 1.06rem;
      font-weight: 400;
      font-variation-settings: 'wdth' 108, 'wght' 500;
      margin: 0 0 10px;
    }

    .services p {
      font-family: var(--mono);
      color: var(--dim);
      font-size: .84rem;
      line-height: 1.6;
      margin: 0
    }

    /* ---------- contact ---------- */
    .contact {
      padding: 76px 0 0
    }

    .contact>.eyebrow {
      margin-bottom: 18px
    }

    .contact-lead {
      font-family: var(--mono);
      color: var(--dim);
      font-size: .92rem;
      line-height: 1.6;
      max-width: 52ch;
      margin: 0 0 32px
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    .contact-info h3 {
      font-size: 1.5rem;
      font-weight: 300;
      margin: 0 0 24px
    }

    .contact-info address {
      font-family: var(--mono);
      font-style: normal;
      font-size: .84rem;
      color: var(--dim);
      line-height: 1.8
    }

    .contact-info address a {
      color: var(--chalk);
      text-decoration: none;
      border-bottom: 1px solid var(--line)
    }

    .contact-info address a:hover,
    .contact-info address a:focus-visible {
      border-bottom-color: var(--amber)
    }

    .form {
      display: grid;
      gap: 20px
    }

    .form-group {
      display: grid;
      gap: 8px
    }

    .form-group label {
      font-family: var(--mono);
      font-size: .75rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim)
    }

    .form-group input,
    .form-group textarea {
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--chalk);
      padding: 14px 16px;
      font-family: var(--wide);
      font-variation-settings: 'wdth' 100;
      font-size: 1rem;
      border-radius: 8px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--amber);
      box-shadow: 0 0 0 1px var(--amber);
    }

    .form-group textarea {
      resize: vertical;
      min-height: 120px
    }

    .form-submit {
      justify-self: start;
      padding: 14px 32px;
      font-family: var(--mono);
      font-size: .875rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      border: 1px solid var(--amber);
      background: var(--amber);
      color: var(--void);
      cursor: pointer;
      transition: background .2s, color .2s;
      border-radius: 8px
    }

    .form-submit:hover,
    .form-submit:focus-visible {
      background: #d49436
    }

    .form-submit:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .form-status {
      min-height: 24px;
      font-size: .875rem
    }

    .form-status.success {
      color: #22c55e
    }

    .form-status.error {
      color: #ef4444
    }

    /* ---------- legal pages ---------- */
    .legal {
      padding: 8px 0 0;
    }

    .legal h1 {
      font-size: clamp(1.9rem, 4.5vw, 2.6rem);
      font-variation-settings: 'wdth' 112, 'wght' 380;
      line-height: 1.12;
      letter-spacing: -.01em;
      margin: 0 0 10px;
    }

    .legal .updated {
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--dim);
      margin: 0 0 40px;
    }

    .legal h2 {
      font-family: var(--mono);
      font-weight: 400;
      font-size: .7rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--dim);
      margin: 40px 0 14px;
    }

    .legal p,
    .legal li {
      font-family: var(--mono);
      color: var(--dim);
      font-size: .86rem;
      line-height: 1.75;
      max-width: 68ch;
      margin: 0 0 14px;
    }

    .legal strong {
      color: var(--chalk);
      font-weight: 400;
    }

    .legal ul {
      padding-left: 18px;
      margin: 0 0 14px;
    }

    .legal a {
      color: var(--chalk);
      text-decoration: none;
      border-bottom: 1px solid rgba(232, 163, 61, .5);
      transition: color .2s ease, border-color .2s ease;
    }

    .legal a:hover,
    .legal a:focus-visible {
      color: var(--amber);
      border-bottom-color: var(--amber);
    }

    .legal .back {
      display: inline-block;
      font-family: var(--mono);
      font-size: .8rem;
      color: var(--amber);
      border: 0;
      margin-top: 44px;
    }

    /* ---------- footer ---------- */
    footer {
      position: relative;
      margin-top: 80px;
      padding-top: 26px;
      padding-bottom: 60px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: .8rem;
      color: var(--dim);
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 24px;
      right: 24px;
      height: 1px;
      background: var(--line);
    }

    .copyright {
      color: var(--dim);
    }

    footer a {
      color: var(--chalk);
      text-decoration: none;
      border-bottom: 1px solid var(--line)
    }

    footer a:hover,
    footer a:focus-visible {
      border-bottom-color: var(--amber)
    }

    /* ---------- a11y + responsive ---------- */
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 4px;
      border-radius: 4px;
    }

    @media (max-width:760px) {
      .grid {
        grid-template-columns: 1fr
      }

      .card {
        min-height: 0
      }

      .hero {
        padding: 40px 24px 56px
      }

      .markwrap {
        width: 150px;
        height: 112px;
        margin: 0 auto;
      }

      .mark {
        height: 96px;
      }

      .flagship {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 24px 0
      }

      .brand {
        height: 38px
      }

      .cup {
        width: calc(100% + 48px);
        margin: 0 -24px 0;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .media,
      .contact {
        padding-top: 56px
      }

      .services {
        padding-bottom: 56px
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .contact-info {
        text-align: center
      }

      .form-submit {
        justify-self: center;
        width: 100%
      }
    }

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

      .cup {
        animation: none
      }

      .card:hover,
      .card:focus-visible,
      .flagship:hover,
      .flagship:focus-visible {
        transform: none
      }

      * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

.gotcha{display:none}