/* ==========================================================================
   Mechatronik PL — shared stylesheet

   Direction: "tabliczka znamionowa" — the rating plate riveted to every
   machine this workshop services. Cool clinical paper instead of warm cream,
   nameplate lettering (Archivo on its width axis), status LEDs instead of
   decorative numbering, mono reserved for anything that is actually data.
   ========================================================================== */

/* Fonts are served from this domain, not Google's: no visitor IP leaves for a
   third party and there is one less connection before text paints. Archivo and
   IBM Plex Mono are both SIL Open Font License, which permits this.
   unicode-range keeps latin-ext off the wire until a Polish glyph needs it. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 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;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:100% 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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plexmono-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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plexmono-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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plexmono-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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/plexmono-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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plexmono-600-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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plexmono-600-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{
  --ink:#17293B;          /* deep navy — the logo wordmark, pushed darker */
  --noir:#0A0E13;         /* reading-room black, for the diagnostics footage */
  --ink-line:#2A3F52;     /* hairlines inside dark sections */
  --paper:#EDF0F3;        /* cool clinical ground */
  --panel:#FFFFFF;
  --rule:#D3DAE1;
  --steel:#55636F;        /* secondary text */

  --green:#1F7A2E;        /* action green — legible as text and under white */
  --led:#56B754;          /* logo green — status marks only, never text */
  --blue:#1E6FB8;
  --teal:#17A2B8;        /* logo teal — accents and marks */
  /* the line-art texture lifts the navy where it crosses a stroke; plain teal
     drops to 3.8:1 there, so dark grounds get the lighter tint */
  --teal-lit:#3FC2D8;
  --ct-ink:#0E6F80;      /* same hue pushed dark enough to read as text */

  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Archivo","Segoe UI",system-ui,sans-serif;

  --radius-sm:8px;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,41,59,.05),0 10px 28px rgba(20,41,59,.07);
  --shadow-lg:0 2px 6px rgba(20,41,59,.06),0 22px 48px rgba(20,41,59,.12);

  --gutter:28px;
  --headroom:96px;        /* measured single-row header (72px) + breathing room */
}
*,*::before,*::after{box-sizing:border-box}
/* any author `display` beats the UA rule for [hidden]; make it stick */
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gutter)}
section[id]{scroll-margin-top:var(--headroom)}

/* nameplate lettering — Archivo pushed onto its expanded width axis */
h1,h2{
  margin:0;line-height:1.05;font-weight:800;
  font-stretch:118%;letter-spacing:-0.03em;
}
h3{margin:0;line-height:1.2;font-weight:700;font-stretch:105%;letter-spacing:-0.015em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}   /* keeps single-word last lines out of the copy */

/* utility label — the spine of this direction */
.tag{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--steel);
}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

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

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(237,240,243,.72);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(23,41,59,.10);
  transition:background-color .2s ease,box-shadow .2s ease;
}
header.is-scrolled{
  background:rgba(237,240,243,.92);
  box-shadow:0 1px 0 rgba(23,41,59,.06),0 10px 24px rgba(20,41,59,.06);
}
/* One row, two ranks. Blue marks a page; the section links sit directly after
   the tab you are on, so they read as branching out of it. */
.bar{display:flex;align-items:center;height:72px;gap:24px}
.brand{display:block}
.bar img{height:26px}
.menu{display:contents}

.nav{display:flex;align-items:center;gap:20px;margin-left:6px}

/* the two pages sit together on the left; blue is the one you are on */
.tab{
  font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  padding-bottom:4px;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.tab:hover{color:var(--blue)}
.tab.is-here{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}

/* this page's sections, unfolding from behind the tabs on arrival */
.subnav{
  position:relative;display:flex;align-items:center;gap:19px;
  padding-left:19px;border-left:1px solid rgba(23,41,59,.16);
}
/* one mark that travels between the links instead of blinking on each */
.subnav-rail{
  position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--led);border-radius:2px;opacity:0;pointer-events:none;
}
.subnav-rail.is-ready{
  transition:transform .34s cubic-bezier(.4,.6,.2,1),
             width .34s cubic-bezier(.4,.6,.2,1),
             opacity .2s ease;
}
.subnav a{
  font-size:12.5px;font-weight:500;color:var(--steel);white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
  animation:slideOut .55s cubic-bezier(.22,.68,.3,1) both;
}
.subnav a:nth-child(1){animation-delay:.10s}
.subnav a:nth-child(2){animation-delay:.17s}
.subnav a:nth-child(3){animation-delay:.24s}
.subnav a:nth-child(4){animation-delay:.31s}
.subnav a:hover{color:var(--ink)}
/* the travelling rail carries the green mark, so the link only shifts weight */
.subnav a.is-current{color:var(--ink);font-weight:600}

@keyframes slideOut{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:none}
}

/* on the home page the CT band belongs to the other page — say so while it is
   on screen, with a couple of soft pulses rather than a flash */
.tab.is-hot{opacity:1;border-bottom-color:var(--blue)}
@media (prefers-reduced-motion:no-preference){
  .tab.is-hot{animation:tabPulse 1.5s ease-in-out 2}
}
@keyframes tabPulse{
  0%,100%{box-shadow:0 3px 0 -2px rgba(30,111,184,0)}
  50%{box-shadow:0 3px 0 -1px rgba(30,111,184,.55)}
}

.lang-switch-bar{margin-left:auto}

/* Two plain marks, not a pill. The active one gets the green underline that
   means "running" everywhere else on this site. */
.lang-switch{display:inline-flex;align-items:center;gap:14px}
.lang-switch-menu{display:none}
.lang-switch button{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.1em;
  background:none;border:none;color:var(--steel);padding:3px 0 4px;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--led)}

/* the page has one job: get the phone dialled — so the number is solid, not outlined */
.tel{
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.01em;
  background:var(--green);color:#fff;padding:9px 15px;border-radius:999px;
  white-space:nowrap;
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.tel:hover{background:#186224;transform:translateY(-1px);box-shadow:0 6px 16px rgba(31,122,46,.28)}

.burger{display:none;background:none;border:1px solid rgba(23,41,59,.35);border-radius:var(--radius-sm);width:40px;height:36px;flex-direction:column;gap:4px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:18px;height:1.5px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px;border-bottom:1px solid var(--ink)}
.hero-top{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:end;padding-bottom:44px}
.hero h1{font-size:clamp(31px,6.6vw,74px)}
.hero h1 span,.hero h1 em{display:inline-block}
.hero h1 em{font-style:normal;color:var(--green)}
.hero h1 span,.hero h1 em,.hero-note,.plate{animation:rise .65s cubic-bezier(.22,.68,.3,1) both}
.hero h1 span:nth-of-type(1){animation-delay:.04s}
.hero h1 span:nth-of-type(2){animation-delay:.15s}
.hero h1 em{animation-delay:.28s}
.hero-note{border-left:2px solid var(--led);padding-left:16px;animation-delay:.36s}
.hero-note p{font-size:15px;color:var(--steel)}
.status{display:flex;align-items:center;gap:9px;margin-bottom:10px}

/* status LED — green means running, the way it does on the machines themselves */
.led{
  display:block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--led);box-shadow:0 0 0 4px rgba(86,183,84,.18);
}

/* ---------- rating plate ---------- */
.plate{
  position:relative;
  border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:inset 0 1px 0 #fff,var(--shadow);
  animation-delay:.44s;
  background-image:
    radial-gradient(circle 3.5px at 15px 15px,rgba(23,41,59,.20) 96%,transparent),
    radial-gradient(circle 3.5px at calc(100% - 15px) 15px,rgba(23,41,59,.20) 96%,transparent),
    radial-gradient(circle 3.5px at 15px calc(100% - 15px),rgba(23,41,59,.20) 96%,transparent),
    radial-gradient(circle 3.5px at calc(100% - 15px) calc(100% - 15px),rgba(23,41,59,.20) 96%,transparent),
    linear-gradient(180deg,#FCFDFE 0%,#F2F5F8 55%,#E6EBEF 100%);
}
.plate-head{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:11px 32px;border-bottom:1px dashed var(--rule);
}
.plate-head .tag{color:var(--steel)}
.plate-head .tag:first-child{color:var(--ink);font-weight:600}
.plate-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.plate-grid div{padding:20px 22px 24px;border-right:1px solid var(--rule)}
.plate-grid div:first-child{padding-left:32px}
.plate-grid div:last-child{border-right:none;padding-right:32px}
.plate-grid .val{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-0.03em;display:block}
.plate-grid .tag{display:block;margin-top:5px}

/* ---------- brand marquee (inline, next to the section title) ---------- */
.brand-marquee{
  flex:0 1 640px;
  max-width:640px;
  min-width:0;
  margin-left:auto;
  align-self:center;
}
.marquee-mask{
  overflow:hidden;
  /* the fade has to be wider than a brand name, or a word leaves the mask still
     dark enough to read as a chopped-off word rather than one on its way out */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.marquee-track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 26s linear infinite;
  will-change:transform;
}
.m-item{display:flex;align-items:center;flex-shrink:0;margin-right:40px}
.m-word{
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--steel);white-space:nowrap;
  transition:color .15s ease;
}
.m-word:hover{color:var(--green)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- services: a scope checklist, not a sequence ---------- */
/* longhand on purpose: `.sec` is used together with `.wrap`, and a `padding`
   shorthand here would reset the horizontal gutter .wrap sets above it */
.sec{padding-top:88px;padding-bottom:88px}
.sec-tight{padding-top:0}
.sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:36px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.sec-head h2{font-size:clamp(24px,3vw,34px);flex:0 0 auto;white-space:nowrap}
.sec-head .tag{margin-left:auto}

/* the LED dots are stations on a rail; a green length grows down it as you
   scroll the list — the vertical twin of the mark travelling in the nav */
#uslugi{position:relative}
.track{
  position:absolute;left:calc(var(--gutter) + 3px);width:2px;
  background:var(--rule);border-radius:2px;pointer-events:none;z-index:0;
}
.track-fill{
  display:block;width:100%;height:0;
  background:var(--led);border-radius:2px;
  transition:height .18s linear;
}

.row{
  position:relative;z-index:1;              /* sits above the rail */
  display:grid;grid-template-columns:14px 1fr 1.6fr;
  gap:0 26px;align-items:start;
  padding:26px 14px;margin:0 -14px;border-bottom:1px solid var(--rule);
  border-radius:var(--radius-sm);
  transition:background .18s ease,box-shadow .18s ease;
}
/* no padding shift on hover any more — it would slide the dot off the rail */
.row:hover{background:var(--panel);box-shadow:var(--shadow)}
.row .led{margin-top:9px;transition:box-shadow .18s ease}
.row:hover .led{box-shadow:0 0 0 6px rgba(86,183,84,.22)}
.row h3{font-size:21px}
.row p{font-size:15px;color:var(--steel)}

/* Line-art texture lifted off the back of the business card — the same
   equipment this workshop services. White lines on a transparent ground, so
   one file tints itself against whatever colour sits underneath. */
.textured{position:relative;isolation:isolate}
.textured::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../slike/pattern.png");
  background-size:480px auto;background-repeat:repeat;
}
.textured > *{position:relative}

/* ---------- engineer block ---------- */
.eng{background:var(--ink);color:var(--paper);padding:80px 0}
.eng.textured::before{opacity:.075}
.eng-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.eng h2{font-size:clamp(26px,3.4vw,40px);margin:14px 0 22px}
.eng p{color:#AFBDC7;font-size:16.5px;margin-bottom:16px;max-width:52ch}
.eng .tag{color:var(--teal-lit)}

/* the page finally says who: a signed line, the way a report is signed */
.sig{margin-top:30px;padding-top:18px;border-top:1px solid var(--ink-line)}
.sig strong{
  display:block;font-size:17px;font-weight:600;font-stretch:105%;
  letter-spacing:-.01em;color:#fff;margin-bottom:3px;
}
.sig span{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:#8FA3B2}

.certs-tag{display:block;margin-bottom:14px}
.certs{border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden}
.certs li{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ink-line);font-size:14.5px}
.certs li:last-child{border-bottom:none}
.certs .yr{font-family:var(--mono);font-size:13px;color:var(--teal-lit)}
.certs .txt{color:#C2CDD5}

/* ---------- vet: the one thing sold rather than serviced ----------
   A full-bleed band, not a card. Its ground repeats the photo's own vertical
   gradient (sampled from the file: #FFF at the top, #E4EBF1 mid, #95B7D0 at the
   foot), and the photo spans the band's full height — so the image has no visible
   edge and the machine simply stands in the section. Green stays reserved for
   service and the phone; this is a product, so it carries the logo's teal. */
.ct-band{
  position:relative;                 /* containing block for the stretched link */
  /* stops measured off ct-machine.jpg row by row; the photo is feathered into the
     same gradient on all four sides, so its edges have nothing to give away */
  background:linear-gradient(180deg,
    #F0F0F0 0%,#F0F0F0 30.5%,#EFEFEF 40.2%,#E7E8EA 50%,
    #CFD9E2 59.8%,#B3C8D8 69.5%,#97B6CE 79.3%,#85ABC7 89%,#85ABC7 100%);
  border-top:1px solid rgba(23,41,59,.12);
  border-bottom:1px solid rgba(23,41,59,.14);
}
.ct-band-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch}
/* stretches to the band height so the photo's gradient stays in register with it */
.ct-visual{min-height:470px}
.ct-visual img{width:100%;height:100%;object-fit:cover;display:block}
.ct-copy{display:flex;flex-direction:column;justify-content:center;padding:60px 0}
.ct-labels{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px}
.ct-labels .tag{color:#2B3743}
.ct-eyebrow{color:var(--ct-ink)!important;font-weight:600}
.ct-copy h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:16px}
.ct-copy p{color:#2B3743;font-size:15.5px;margin-bottom:26px;max-width:52ch}

.ct-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-bottom:28px}
.ct-specs li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(23,41,59,.16);font-size:14px;
}
.ct-specs .k{color:#2B3743}
.ct-specs .v{font-family:var(--mono);font-weight:600;white-space:nowrap}

.vet-data{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.vet-specs li{display:flex;justify-content:space-between;gap:16px;padding:15px 26px;border-bottom:1px solid var(--rule);font-size:14.5px}
.vet-specs li:last-child{border-bottom:none}
.vet-specs .k{color:var(--steel)}
.vet-specs .v{font-family:var(--mono);font-weight:600}
.link{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px;color:var(--green);border-bottom:2px solid var(--led);padding-bottom:2px}
.link:hover{border-bottom-color:var(--green)}

/* stretched link — the whole offer is the click target, but the accessible
   name stays just this link's text rather than the entire section */
/* ink, not teal: the link sits low on the band where the ground is darkest */
.ct-link{color:var(--ink);border-bottom-color:var(--teal);align-self:flex-start}
.ct-link::after{content:"";position:absolute;inset:0}
.ct-band:hover .ct-link{border-bottom-color:var(--ink)}

/* ---------- product page (tomograf-ct.html) ---------- */
.led-teal{background:var(--teal);box-shadow:0 0 0 4px rgba(23,162,184,.18)}
.row:hover .led-teal{box-shadow:0 0 0 6px rgba(23,162,184,.24)}

.prod-hero{padding-top:56px}
.prod-hero h1{font-size:clamp(36px,7vw,84px)}
.prod-top{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:end;padding-bottom:40px}
.prod-intro .hero-note{margin-top:30px;max-width:52ch;border-left-color:var(--teal)}
/* needs to out-specify `.hero h1 span{display:inline-block}` above */
.hero h1 .prod-eyebrow{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:13px;font-weight:500;font-stretch:100%;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ct-ink);
}
/* aspect matches the crop exactly, so nothing of the machine is cut away */
.prod-photo{
  aspect-ratio:560/640;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--rule);background:#F1F6FA;
  box-shadow:var(--shadow);
  animation:rise .65s cubic-bezier(.22,.68,.3,1) both;animation-delay:.4s;
}
.prod-photo img{width:100%;height:100%;object-fit:cover}

/* imaging modes, on the dark band */
.modes-title{font-size:clamp(26px,3.4vw,40px);margin:14px 0 14px}
.modes-lead{color:#AFBDC7;font-size:16.5px;max-width:60ch;margin-bottom:34px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden}
.modes li{background:var(--ink);padding:24px 22px}
.modes .m-name{display:block;font-weight:700;font-stretch:105%;font-size:17px;color:#fff;margin-bottom:6px}
.modes .m-note{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:#8FA3B2}

.spec-full .vet-specs li{padding:16px 26px}
.spec-src{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--steel)}

/* clinical reconstruction modes — a vocabulary list, so chips rather than rows */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  padding:9px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--rule);color:var(--steel);
}

/* ---------- diagnostics: a viewing station -------------------------------
   One lit panel with the heading laid over it, and the other recordings
   offered alongside — you are looking at a study and picking the next. */
.diag{
  background:radial-gradient(78% 62% at 42% 46%,#141C26 0%,var(--noir) 72%);
  color:#C2CDD5;padding:84px 0 92px;
}
.diag-grid{display:grid;grid-template-columns:2.55fr 1fr;gap:20px;align-items:start}

.vframe{
  position:relative;overflow:hidden;background:#000;aspect-ratio:16/10;
  border:1px solid #2A3947;border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 22px 52px rgba(0,0,0,.6);
}
/* per-clip crop window, centred and full height; black bars vanish into the
   panel because every clip already sits on black */
.vshot{position:relative;overflow:hidden;height:100%;margin:0 auto}
.vshot video{display:block;width:100%;height:100%;object-fit:contain;background:#000}

/* Kadrowanie siedzi teraz w samych plikach, nie w CSS-ie.

   Wcześniej pliki szły w całości, a przycinał je dopiero arkusz stylów — czyli
   wcale: nazwa lecznicy, identyfikator pacjenta i data badania jechały do
   przeglądarki i wystarczyło pobrać plik, żeby je zobaczyć. Nagrania zostały
   przekodowane ffmpegiem: C przycięte, A przycięte, a w A i B dane zasłonięte
   czarnymi prostokątami (w każdym z paneli osobno, bo przycięcie tam nie sięga).
   Zostają tylko proporcje — po jednej na klip, zgodne z nowymi wymiarami. */
.shot-b{aspect-ratio:1256/784}
.shot-c{aspect-ratio:860/720}
.shot-a{aspect-ratio:1244/772}

/* heading laid over the panel; pointer-events off so the controls stay usable */
/* the frame underneath keeps changing, so the scrim has to hold on its own and
   the type carries a shadow — never rely on the footage being dark here */
.viewer-head{
  position:absolute;left:0;right:0;top:0;padding:28px 32px 72px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,9,13,.95) 0%,rgba(6,9,13,.86) 38%,rgba(6,9,13,.46) 70%,rgba(6,9,13,0) 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.viewer-head h2{font-size:clamp(24px,2.6vw,34px);color:#fff;margin:10px 0 10px}
.viewer-head p{color:#C3D0DB;font-size:15px;max-width:44ch}
.diag-tag{color:var(--teal-lit)}
.viewer-caps p{font-family:var(--mono);font-size:12px;line-height:1.65;color:#8296A6;padding-top:12px}

/* the recordings on offer — the one on screen is not offered again */
.picker-tag{display:block;color:#7D8E9C;margin-bottom:12px}
.picker ul{display:grid;gap:14px}
.picker button{
  display:block;width:100%;padding:0;cursor:pointer;text-align:left;
  background:#000;border:1px solid #2A3947;border-radius:8px;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.picker button img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.picker button span{
  display:block;padding:9px 12px 11px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:#A8B8C6;
}
.picker button:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.picker button:hover span{color:#fff}

.cta-sub{margin-top:10px;color:var(--steel);font-size:15.5px;max-width:44ch}
/* two matched actions rather than a button with a stray link under it:
   the call is filled, writing is the same shape held back to an outline */
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
/* Every action on this site is a pill — the phone in the header sets the shape,
   these are the same thing at full size. Filled means call, outlined means write. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  border-radius:999px;border:1px solid transparent;white-space:nowrap;
  font-family:var(--mono);font-weight:600;letter-spacing:-.01em;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;
}
.btn-solid{
  background:var(--green);color:#fff;padding:16px 32px;
  font-size:clamp(19px,2.3vw,27px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px rgba(31,122,46,.24);
}
.btn-solid:hover{
  background:#186224;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 34px rgba(31,122,46,.32);
}
.btn-line{
  background:var(--panel);border-color:rgba(23,41,59,.24);color:var(--ink);
  padding:14px 26px;font-size:14px;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(20,41,59,.04);
}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-arrow{color:var(--steel);transition:transform .15s ease,color .15s ease}
.btn:hover .btn-arrow{transform:translateX(3px);color:var(--ink)}

/* ---------- reviews ---------- */
/* auto-fit, because the count changes once the Google feed takes over */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.rev{
  padding:32px 28px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow);
  transition:box-shadow .2s ease,transform .2s ease;
}
.rev:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.rev .stars{color:var(--blue);font-size:13px;letter-spacing:3px;margin-bottom:16px}
.rev blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.6}
.rev .who{font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:0.04em}
.rev .who b{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink);letter-spacing:0;margin-bottom:2px}

.reviews-cta{margin-top:26px}

/* ---------- from the workshop: his own photos, all portrait ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.shop-grid figure{margin:0}
.shop-grid img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:10px;background:var(--panel);
  box-shadow:var(--shadow);
}
.shop-grid figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--steel);padding-top:11px;
}

.reviews-live-note{
  margin-top:18px;padding:14px 18px;border:1px dashed var(--rule);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:12.5px;color:var(--steel);line-height:1.7;
}
.reviews-live-note strong{color:var(--ink);font-family:var(--sans)}
.reviews-live-note code{background:rgba(23,41,59,.06);padding:1px 5px;border-radius:4px}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--ink);padding:64px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,3vw,34px);max-width:16ch}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#93A3AF;padding:56px 0 26px;font-size:14px}
/* lower than the engineer band: the type down here is smaller, greyer mono, and
   at .11 the instruments read as a picture behind it rather than as texture */
footer.textured::before{opacity:.07}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--ink-line)}
.f-grid img{height:24px;margin-bottom:14px}
.f-grid p + p{margin-top:9px}
.f-legal{margin-top:16px!important;font-family:var(--mono);font-size:11.5px;line-height:1.8;color:#7C8E9B}
.f-legal span{display:block}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#8496A2;margin:0 0 14px}
footer li{margin-bottom:9px}
footer a:hover{color:#fff}
footer :focus-visible{outline-color:var(--teal-lit)}
.f-bot{padding-top:22px;font-family:var(--mono);font-size:11.5px;color:#8496A2}

/* ---------- responsive ---------- */
/* the single row is long, so it folds into the burger before the page grids do */
@media (max-width:1024px){
  /* opaque: a dropdown gains nothing from translucency and loses legibility */
  .menu{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--paper);
    border-bottom:1px solid rgba(23,41,59,.10);
    padding:6px var(--gutter) 20px;box-shadow:var(--shadow-lg);
  }
  .menu.is-open{display:block}
  .nav{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .subnav{
    flex-direction:column;align-items:stretch;gap:0;
    padding:0 0 0 16px;border-left:2px solid rgba(30,111,184,.22);margin:2px 0 6px;
  }
  .tab,.subnav a{display:block;padding:13px 2px;border-bottom:1px solid var(--rule)}
  .tab{font-size:16.5px}
  .subnav a{font-size:14.5px;animation:none}
  /* a horizontal rail makes no sense in a stacked list */
  .subnav-rail{display:none}
  /* stacked items read as separate already — mark the current one by weight */
  .tab.is-here,.subnav a.is-current{border-bottom-color:var(--rule);font-weight:600}
  .tab.is-hot{animation:none}
  .burger{display:flex}
  /* the language pair leaves the bar here, and with it the `margin-left:auto`
     that pushed everything right — hand that job to the phone number, or the
     logo, number and burger clump together on the left of a wide bar */
  .tel{margin-left:auto}
  .lang-switch-bar{display:none}
  .lang-switch-menu{display:inline-flex;margin-top:18px}
}
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr;gap:28px;align-items:start}
  .plate-grid{grid-template-columns:1fr 1fr}
  .plate-grid div:nth-child(2){border-right:none;padding-right:32px}
  .plate-grid div:nth-child(3){padding-left:32px}
  .plate-grid div:nth-child(1),.plate-grid div:nth-child(2){border-bottom:1px solid var(--rule)}
  .row{grid-template-columns:14px 1fr;gap:0 16px}
  .row p{grid-column:2;margin-top:8px}
  .eng-grid{grid-template-columns:1fr;gap:36px}
  .ct-band-in{grid-template-columns:1fr;gap:0}
  .ct-visual{max-width:420px;margin:0 auto;width:100%}
  .ct-copy{padding:8px 0 56px}
  .modes{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr 1fr}
  .cta-actions{width:100%;justify-content:flex-start}
  .diag-grid{grid-template-columns:1fr}
  .picker ul{grid-template-columns:1fr 1fr}

  /* Na wąskim ekranie napis nie może leżeć na nagraniu: przy 390 px ramka ma
     219 px wysokości, a sam tytuł z opisem zajmuje około 287 px — `overflow:hidden`
     ucinał wtedy ostatni wiersz w połowie zdania. Ramka przestaje więc być kadrem
     o stałych proporcjach i staje się kolumną: napis, pod nim nagranie. Proporcje
     przejmuje .vshot, który i tak nosi je osobno dla każdego klipu, więc kadrowanie
     zostaje nietknięte. */
  .vframe{aspect-ratio:auto;display:flex;flex-direction:column}
  /* `margin:0 auto` z układu desktopowego to w kolumnie marginesy na osi
     poprzecznej — blokują rozciągnięcie, kadr zwężał się do zawartości, a ta
     jest pozycjonowana absolutnie, więc do zera. Stąd jawna szerokość. */
  .vshot{height:auto;width:100%;margin:0}
  .viewer-head{
    position:static;order:-1;padding:22px 20px 18px;
    background:none;text-shadow:none;
  }
  .viewer-head p{max-width:none}
  /* zasłona gradientowa była po to, żeby tekst dało się czytać na obrazie —
     nad obrazem jest już niepotrzebna */

  /* 12 px szarości na czerni nie da się przeczytać w słońcu */
  .viewer-caps p{font-size:13px;color:#9DAFBD}
  .prod-top{grid-template-columns:1fr;gap:34px;align-items:start}
  .prod-photo{max-width:340px}
  .f-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .sec{padding-top:64px;padding-bottom:64px}
  .sec-tight{padding-top:0}
  .sec-head{flex-wrap:wrap}
  .sec-head h2{white-space:normal}
  .brand-marquee{flex:1 1 100%;max-width:100%;margin-left:0;order:3;margin-top:12px}
  .plate-head,.plate-grid div:first-child,.plate-grid div:last-child,
  .plate-grid div:nth-child(2),.plate-grid div:nth-child(3){padding-left:24px;padding-right:24px}
  .ct-specs{grid-template-columns:1fr;gap:0}
  .modes{grid-template-columns:1fr}
  .bar{gap:12px}
  .tel{font-size:12px;padding:8px 12px}
}
/* narrow phones: the bar is logo + number + burger, and all three must fit */
@media (max-width:480px){
  :root{--gutter:16px}
  .bar{gap:10px}
  .bar img{height:21px}
  .tel{font-size:11.5px;padding:7px 10px;letter-spacing:-.01em}
  .burger{width:36px;height:34px}
  .plate-head{flex-direction:column;gap:4px}
  .vet-specs li,.plate-head{padding-left:20px;padding-right:20px}
  .cta-in{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}