:root{
    --ink:#0F172A; --abyss:#080C16; --steel:#64748B; --silver:#CBD5E1;
    --paper:#F6F7F9; --signal:#2563EB; --ember:#F97316; --line:rgba(15,23,42,.10);
  }
  html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; zoom:.86; }
  /* na mobiloch ponechať väčšiu mierku pre čitateľnosť */
  @media (max-width:640px){ html{ zoom:.93; } }
  body{ background:var(--abyss); color:var(--paper); overflow-x:hidden; font-size:17px; line-height:1.6; }
  ::selection{ background:var(--signal); color:#fff; }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:#0b1120; }
  ::-webkit-scrollbar-thumb{ background:#2b3a52; border-radius:10px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--signal); }

  /* fine technical grid */
  .gridlines{
    background-image:
      linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:96px 96px;
  }
  .gridlines-dark{
    background-image:
      linear-gradient(to right, rgba(15,23,42,.055) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,.055) 1px, transparent 1px);
    background-size:96px 96px;
  }
  /* grain overlay */
  .noise{ position:relative; }
  .noise::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .accent-rule{ height:2px; background:linear-gradient(90deg, var(--signal), transparent); }

  /* eyebrow label */
  .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }

  /* animated link underline */
  .ulink{ position:relative; }
  .ulink::after{
    content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
    background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .ulink:hover::after{ transform:scaleX(1); transform-origin:left; }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
  .reveal.in{ opacity:1; transform:none; }

  /* hero rise */
  @keyframes rise{ from{ transform:translateY(110%);} to{ transform:translateY(0);} }
  .rise span{ display:block; }
  .rise.go span{ animation:rise 1s cubic-bezier(.16,.84,.28,1) both; }

  /* capability card */
  .cap{ transition:transform .5s cubic-bezier(.16,.84,.28,1), background-color .5s, border-color .5s; }
  .cap:hover{ transform:translateY(-8px); background:#0d1626; border-color:rgba(37,99,235,.35); }
  .cap .sweep{ transform:scaleX(0); transform-origin:left; transition:transform .55s cubic-bezier(.16,.84,.28,1); }
  .cap:hover .sweep{ transform:scaleX(1); }
  .cap .idx{ transition:color .5s; }
  .cap:hover .idx{ color:var(--signal); }
  .cap svg{ transition:transform .5s cubic-bezier(.16,.84,.28,1), stroke .5s; }
  .cap:hover svg{ transform:translateY(-3px) scale(1.05); stroke:#fff; }

  /* project / image hover */
  .proj img{ transition:transform 1.1s cubic-bezier(.16,.84,.28,1); }
  .proj:hover img{ transform:scale(1.05); }
  .proj .meta{ transform:translateY(12px); opacity:0; transition:transform .55s cubic-bezier(.16,.84,.28,1), opacity .55s; }
  .proj:hover .meta{ transform:none; opacity:1; }
  .proj .veil{ transition:opacity .55s; }
  .proj:hover .veil{ opacity:.95; }

  /* marquee */
  @keyframes slide{ to{ transform:translateX(-50%);} }
  .marquee{ animation:slide 40s linear infinite; }
  .marquee:hover{ animation-play-state:paused; }

  .btn{ transition:background-color .3s, color .3s, border-color .3s, transform .3s; }
  .btn:hover{ transform:translateY(-2px); }
  .btn-arrow svg{ transition:transform .4s cubic-bezier(.16,.84,.28,1); }
  .btn:hover .btn-arrow svg{ transform:translateX(6px); }

  .mono-img{ filter:grayscale(1) contrast(1.06) brightness(.85); }

  /* premium product imagery */
  .lift{ box-shadow:0 30px 70px -34px rgba(15,23,42,.45); }
  .lift-lg{ box-shadow:0 45px 90px -40px rgba(15,23,42,.55); }

  .lang-active{ color:var(--paper); }

  /* nav */
  #nav{ transition:background-color .4s, border-color .4s, box-shadow .4s, height .4s; }
  #nav.scrolled{ box-shadow:0 12px 40px -24px rgba(0,0,0,.8); }
  .navlink{ position:relative; color:rgba(241,245,249,.78); transition:color .25s; }
  .navlink:hover{ color:#fff; }
  .navlink::after{
    content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:var(--signal);
    transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .navlink:hover::after{ transform:scaleX(1); transform-origin:left; }

  /* finish swatch */
  .fin{ width:34px; height:34px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.18); position:relative; }
  .fin[aria-pressed="true"]{ box-shadow:inset 0 0 0 1px rgba(15,23,42,.18), 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); }

  /* product 3D viewer */
  .tilt-stage{ perspective:1100px; }
  .tilt{ transition:transform .35s cubic-bezier(.16,.84,.28,1); transform-style:preserve-3d; will-change:transform; }
  .pthumb{ position:relative; opacity:.62; transition:opacity .25s, box-shadow .25s; box-shadow:inset 0 0 0 1px rgba(15,23,42,.12); }
  .pthumb:hover{ opacity:.9; }
  .pthumb[aria-pressed="true"]{ opacity:1; box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--signal); }

  /* quote modal */
  .modal-card{ animation:modalIn .3s cubic-bezier(.16,.84,.28,1) both; }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
  .fld{ width:100%; background:#fff; border:1px solid rgba(15,23,42,.16); color:var(--ink); font-size:15px; padding:11px 14px; transition:border-color .2s, box-shadow .2s; }
  .fld::placeholder{ color:#94a3b8; }
  .fld:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
  .fld-l{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }
  .fld-file{ padding:9px 12px; cursor:pointer; color:var(--steel); }
  .fld-file::file-selector-button{ margin-right:12px; border:0; background:var(--ink); color:#fff; font:inherit; font-size:13px; padding:7px 13px; cursor:pointer; transition:background-color .2s; }
  .fld-file::file-selector-button:hover{ background:var(--signal); }
  .void-credit{ color:#6b7a99; text-decoration:none; font-size:13px; }
  .void-credit .vc-void{ transition:color .2s; }
  .void-credit:hover .vc-void{ color:#ef4444; }
  /* ── tmavá téma pre pôvodne svetlé sekcie (about / product / process) ── */
  #about, #product, #process{ background:var(--abyss); color:var(--paper); }
  #about .gridlines-dark, #product .gridlines-dark, #process .gridlines-dark{
    background-image:
      linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  }
  #about .bg-paper, #process .bg-paper{ background:var(--ink); }
  #about .bg-ink\/10, #process .bg-ink\/10{ background:rgba(255,255,255,.08); }
  #about .border-ink\/10, #process .border-ink\/10, #product .border-ink\/12{ border-color:rgba(255,255,255,.12); }
  #about .bg-ink\/20, #product .bg-ink\/20, #process .bg-ink\/20{ background:rgba(255,255,255,.20); }
  #product .divide-ink\/10 > :not([hidden]) ~ :not([hidden]){ border-color:rgba(255,255,255,.10); }
  #about .text-ink, #product .text-ink, #process .text-ink{ color:var(--paper); }
  #product .text-ink\/80{ color:rgba(246,247,249,.82); }
  #product .bg-signal\/\[0\.06\]{ background:rgba(37,99,235,.12); }
  /* tmavé akčné prvky → značková modrá, aby vynikli na tmavom */
  #process .bg-ink{ background:var(--signal); }
  #product a.bg-ink{ background:var(--signal); color:#fff; }
  #product a.bg-ink:hover{ background:var(--ember); }

  /* ── sériové kovania — mechanizmus otvorený/zatvorený ── */
  .kov-card{ transition:transform .5s cubic-bezier(.16,.84,.28,1), border-color .5s, box-shadow .5s; }
  .kov-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.40); box-shadow:0 42px 74px -42px rgba(0,0,0,.85); }
  .kov-stage{ background:radial-gradient(120% 92% at 50% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02) 46%, transparent 72%); }
  .kgrid{ background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:34px 34px; }
  .kov-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:11% 13%;
    transition:opacity .55s cubic-bezier(.16,.84,.28,1), transform .6s cubic-bezier(.16,.84,.28,1); }
  .kov-shot.s-open{ opacity:0; transform:scale(1.015); }
  .kov-shot.s-closed{ opacity:1; }
  .kov-card:hover .s-open, .kov-card.is-open .s-open{ opacity:1; transform:none; }
  .kov-card:hover .s-closed, .kov-card.is-open .s-closed{ opacity:0; }
  .kov-floor{ position:absolute; left:50%; bottom:10.5%; width:60%; height:20px; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%); filter:blur(4px); opacity:.55; pointer-events:none; }
  /* stavový štítok (crossfade dvoch popisov na sebe) */
  .kov-state .lbl{ transition:opacity .4s; }
  .kov-card .lbl-open{ opacity:0; }
  .kov-card .lbl-closed{ opacity:1; }
  .kov-card:hover .lbl-open, .kov-card.is-open .lbl-open{ opacity:1; }
  .kov-card:hover .lbl-closed, .kov-card.is-open .lbl-closed{ opacity:0; }
  .kov-toggle svg{ transition:transform .45s cubic-bezier(.16,.84,.28,1); }
  .kov-card:hover .kov-toggle svg, .kov-card.is-open .kov-toggle svg{ transform:rotate(90deg); }

  /* ── produktové kategórie (taby) ── */
  .ptab{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--silver); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.12);
    padding:11px 18px; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
    transition:color .3s, background-color .3s, border-color .3s, transform .3s;
  }
  .ptab:hover{ color:#fff; border-color:rgba(37,99,235,.5); transform:translateY(-2px); }
  .ptab .ptab-n{ font-size:10.5px; color:var(--steel); }
  .ptab.is-active{ color:#fff; background:var(--signal); border-color:var(--signal); }
  .ptab.is-active:hover{ transform:none; }
  .ptab.is-active .ptab-n{ color:rgba(255,255,255,.72); }
  .prodpanel[hidden]{ display:none; }
  /* mobil: kompaktná mriežka 2×2, aby taby nezabrali celú obrazovku a panel bol hneď viditeľný.
     minmax(0,1fr) drží stĺpce rovnaké a zmrštiteľné; dlhé slová (napr. nem. „Verbindungsmaterial")
     sa zalomia v rámci bunky namiesto pretečenia mimo obrazovku */
  @media (max-width:640px){
    #prodTabs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    #prodTabs .ptab{
      min-width:0; width:100%; justify-content:space-between; gap:6px;
      padding:11px 13px; font-size:11.5px; letter-spacing:.07em;
      text-align:left; overflow-wrap:anywhere; hyphens:auto;
    }
    #prodTabs .ptab:hover{ transform:none; }
    #prodTabs .ptab-n{ flex:none; }
  }

  /* jednoobrázkové / statické produktové karty — rovnaký vzhľad ako kov-card */
  .prod-card{ transition:transform .5s cubic-bezier(.16,.84,.28,1), border-color .5s, box-shadow .5s; }
  .prod-card:hover{ transform:translateY(-6px); border-color:rgba(37,99,235,.40); box-shadow:0 42px 74px -42px rgba(0,0,0,.85); }
  /* crossfade len pri kartách s dvoma fotkami (.two); jednotlivé fotky sa na hover nemenia */
  .prod-card.two:hover .kov-shot.s-open{ opacity:1; transform:none; }
  .prod-card.two:hover .kov-shot.s-closed{ opacity:0; }